如何使用复选框列表中的选定值创建数组？

Question

I have a list that renders some products that are divided into some categories.

It is possible to select these categories through a checkbox. Would you like to know how to create an array with the list of selected values in the checkbox?

Here is my code I put into codesandbox :

I'm getting the value of the last selected filter, I'm not being able to create an array with all the selected values:

 import Divider from "@material-ui/core/Divider"; import List from "@material-ui/core/List"; import ListItem from "@material-ui/core/ListItem"; import ListItemText from "@material-ui/core/ListItemText"; import Checkbox from "@material-ui/core/Checkbox"; import React, { useState } from "react"; import data from "../data"; import { useStyles } from "./styles"; const DrawerComponent = () => { const classes = useStyles(); const [activeFilter, setActiveFilter] = useState([]); const handleChange = (text) => (event) => { setActiveFilter((prev) => ({ ...prev, value: event.target.checked, text })); }; console.log("activeFilter: ", activeFilter); const allCategories = data .reduce((p, c) => [...p, ...c.categories], []) .filter((elem, index, self) => index === self.indexOf(elem)); return ( <div className={classes.root}> <div className={classes.toolbar} /> <Divider /> <List className={classes.list}> {allCategories.sort().map((text, index) => ( <ListItem className={classes.itemList} button key={text}> <Checkbox onChange={handleChange(text)} /> <ListItemText primary={text} /> </ListItem> ))} </List> </div> ); }; export default DrawerComponent;

Thank you in advance.

Answer 1

Et voilà. I've added a callback in your onChange event so as to avoid writing it in the handleChange function. Also, I've made sure the array is properly filtered if you toggle the checkbox status (with your version, a country would be added in double if you clicked twice on it).

 const handleChange = (text) => { if(activeFilter.some(country=> country.text === text)){ const updatedList = activeFilter.filter(country=> country.text!==text) return setActiveFilter(updatedList) } return setActiveFilter((prev) => ([...prev, {text}])) } // <Checkbox onChange={()=> handleChange(text)} />

Answer 2

You can also add or filter array based on checkbox events:

const handleChange = (event, text) => {
  if (event.target.checked) {
    setActiveFilter((prev) => prev.concat({text}));
  } else {
    const filteredData = activeFilter.filter(
      (filterValue) => filterValue.text !== text
    );
    setActiveFilter(filteredData);
  }
};

...

<Checkbox onChange={(event) => handleChange(event, text)} />