如何控制checkBox的checked props？

Question

我制作了复选框组件和内部，
设置 isChecked 状态以记住检查的值，即使在
的情况下重新渲染后也是如此将获取新数据。
但正因为如此，isChecked state 使每个复选框都被选中。
这是例子。 https://codesandbox.io/s/withered-sun-pm8o9?file=/src/App.js
如何单独控制复选框？

Answer 1

问题

您只有一个 isChecked 值来切换所有复选框。

一个解决方案 - 有多个

存储一组已检查的布尔值。将状态初始化为根据 items prop.
计算的数组
```
const [isChecked, setIsChecked] = useState(items.map((_) => false));
```
更新 check onChange 处理程序以也使用索引值。请注意，我还将此处理程序重写为一个柯里化函数，该函数使用 item 和 index 以及 returns 接受 onChange 事件对象的回调函数。使用 index 将前一个状态映射到下一个状态，在索引匹配时保存 checked 值。
```
const check = (item, index) => (e) => {
  const { checked } = e.target;
  handleCheck(checked, item);
  setIsChecked((isChecked) =>
    isChecked.map((el, i) => (i === index ? checked : el))
  );
};
```

将 items 属性映射到复选框输入时，使用索引传递给 onChange 处理程序并访问 isChecked 选中的值。

return items.map((item, i) => (
  <FormControlLabel
    value="start"
    control={
      <Checkbox
        ...
        onChange={check(item, i)} // <-- pass item and index i
        checked={isChecked[i]}    // <-- get checked value from state by index i
      />
    }
    label={item}
    labelPlacement="end"
  />
));

如何控制checkBox的checked props？

How to control checkBox's checked props?

checkbox

reactjs

问题

一个解决方案 - 有多个

演示