从 Reactjs 中的复选框数组中删除选中的项目

Question

我创建了一个复选框数组来存储选中的项目数组，当项目被选中时它应该存储在一个数组中，当项目取消选中时从数组中删除。

                       <input
                        className="border border-2 "
                        type="checkbox"
                        value={`${items.VariationID}`}
                        defaultChecked={!!checked[items.VariationID]}
                        onChange={(e) => {
                          handleChange(e);
                        }}
                      />

这就是我创建选中数组的方式

const handleChange = (e) => {
let updatedList = [...checked];
if (checked) {
  updatedList = [...checked, e.target.value];
} else {
  updatedList.splice(checked.indexOf(e.target.value), 1);
}
setChecked(updatedList);

console.log(updatedList);

};

但我得到的结果是，当我选中该项目时，该项目已添加到检查数组中，但当取消选中该复选框时，它并没有将其从数组中删除，而是再次加载。

如何正确操作？

Answer 1

您应该使用 e.target.checked 而不是 checked。

const handleChange = (e) => {
let updatedList = [...checked];
// if (checked) { <- this part, checked is the array of checked item right?
if(e.target.checked) {
  updatedList = [...checked, e.target.value];
} else {
  updatedList.splice(checked.indexOf(e.target.value), 1);
}
setChecked(updatedList);

console.log(updatedList);

从 Reactjs 中的复选框数组中删除选中的项目

Remove the checked item from the checkbox array in Reactjs

javascript

arrays

checkbox

reactjs