复选框 reactjs 正在检查所有选项答案

【问题标题】：checkbox reactjs is checking all options复选框 reactjs 正在检查所有选项
【发布时间】：2020-07-06 09:31:11
【问题描述】：

我正在使用一个使用状态的 material-ui 复选框。当我点击选择一个选项时，它会全选，但我希望他只选择被点击的那个。

代码：

export default function Categorys() {
  const [state, setState] = React.useState({
    checkedG: true
  });

  const handleChange = event => {
    setState({ ...state, [event.target.name]: event.target.checked });
  };
  return (
    <>
      {categorys.map(category => (
        <FormControlLabel
          key={category.id}
          control={
            <GreenCheckbox
              checked={state.checkedG}
              onChange={handleChange}
              name="checkedG"
              key={category.id}
            />
          }
          label={category.name}
        />
      ))}
    </>
  );
}

【问题讨论】：

标签： reactjs material-ui use-state

【解决方案1】：

因为它们都具有相同的选中属性。将其更改为：

export default function Categorys() {
  const [state, setState] = React.useState({});

  const handleChange = event => {
    setState(prevState => { ...prevState, [event.target.name]: event.target.checked });
  };
  return (
    <>
      {categorys.map(category => (
        <FormControlLabel
          key={category.id}
          control={
            <GreenCheckbox
              checked={state[category.id]}
              onChange={handleChange}
              name={category.id}
              key={category.id}
            />
          }
          label={category.name}
        />
      ))}
    </>
  );
}

【讨论】：