如果通过钩子签入状态，如何访问自动完成的复选框和存储标题？

Question

I am using the React Material-UI Autocomplete, which contains checkboxes (here is code so far, see demo.js): https://codesandbox.io/s/material-demo-rxbhz?fontsize=14&hidenavigation=1&theme=dark

I would like store all of the food names that are checked into a hook, like so:

const [item, setItem] = React.useState([{title: "Food_Item_1"}, {title: "Food_Item_2"), ...]);

The code currently does not save the checked food names into the item const. I need these in a usable format to filter out a list of food reviews (in the data const) by putting into filteredData only the reviews that have the title matching one of the food names in the hook, and rendering the filteredData. The filteredData function seems to be working, but I also need help adapting it to use the hook data (ie right now it only checks one item, how do I make it check against everything in item)?

Thank you.

Answer 1

To store data like:

const [item, setItem] = React.useState([{title: "Food_Item_1"}, {title: "Food_Item_2"), ...]);

you need these below changes:

export default function CheckboxesTags() {
  const [item, setItem] = React.useState([]);

  const handleChange = (evt, options) => {
    evt.persist();
    const lastAddedItem = options[options.length -1];
    setItem([...item, {title: lastAddedItem.item}]);
  };


  const filteredData = data.filter(menuitem => {
    return menuitem.title === item.title;
  });

  return (
    <Autocomplete
      multiple
      id="checkboxes-tags-demo"
      options={MENU}
      disableCloseOnSelect
      getOptionLabel={option => option.item}
      renderOption={(option, { selected }) => (
        <React.Fragment>
          <Checkbox
            icon={icon}
            checkedIcon={checkedIcon}
            style={{ marginRight: 8 }}
            checked={selected}
          />
          {option.item}
        </React.Fragment>
      )}
      style={{ width: 500 }}
      onChange={(e, options)=>{handleChange(e, options)}}
      renderInput={params => (
        <TextField
          {...params}
          variant="outlined"
          label="Menu"
          placeholder="Item"
          fullWidth
        />
      )}
    />
  );
}

Here options is passed as an argument to handleChange function which is an array of all the items checked. So we will fetch the last selected item from that array and append that to the items array managed by setItem hook.