如何在ReactJS的功能组件中管理4 Checkbox的状态？

Question

我将如何创建具有四个复选框的功能组件？我创建了动态映射数组，并使用以下命令设置了它的值：

const [checked, setChecked] = useState([false, false, false, false])

然后使用功能更改其状态，例如：

const checkboxes = array.map( (el, index) => {

return <Checkbox

checked={checked[index]}

onChange={checkedHandler}/>

}

这是处理程序：

const checkedHandler = (event, index) => {

setChecked(...)

//Well, here I don't know how change the particular value of the array...

}

还是我必须为每个Checkbox检查状态创建一个useState？并在必要时如何将此复选框的状态传递给父组件？

Answer 1

您以错误的方式调用了checkedHandler。你有：

onChange={checkedHandler}

您应该拥有：

onChange={() => {checkedHandler(index)}}

在处理程序本身中，您应该复制当前数组以防止其发生变化并更改indexed的值：

const checkedHandler = (index) => {
  const newChecked = [...checked];
  newChecked[index] = !checked[index]; // toogle the checkbox
  setChecked(newChecked);
}

Answer 2

将id分配给每个复选框，例如id="1"，id="2"等...

然后您的checkedHandler()函数如下：

checkedHandler(event) {
    const newChecked = [...checked]
    newChecked[parseint(event.target.id) - 1] = true
    setChecked(newChecked)
}

Answer 3

有很多方法可以执行此操作，如果您的情况很简单，则可以浅表复制数组并仅更改所需的索引。

let newChecked = [...checked]
newChecked[index] = value
setChecked(newChecked)

但是对于更复杂的情况，请查看Correct modification of state arrays in ReactJS