React钩子将映射的复选框值添加到数组或将其移除

Question

我在网上尝试了一些解决方案，但无法解决，所以我需要询问。我有在渲染中映射的复选框。如果选中，我想将复选框的值添加到数组状态，如果未选中，则删除该值。谢谢你的帮助我试过的事；

我的jsx；

{props.edit && <input type="checkbox" value={props.id} onChange={(e) => setDeleteId(e)}/>}

功能；

const [deleteId, setdeleteId] = useState([]);
const setDeleteId = (e) => {
setdeleteId([...deleteId, e.target.value]);
}
useEffect(() => {
console.log(deleteId);
}, [deleteId])

Answer 1

您的事件处理程序看起来总是将复选框id添加到状态中-当复选框未选中时，您还需要将其删除，例如-

const [selected, setSelected] = useState([]);
const handleChange = event => {
const { checked, value } = event.currentTarget;
setSelected(
prev => checked
? [...prev, value]
: prev.filter(val => val !== value)
);
};

下面是StackBlitz上的演示，展示了它是如何组合在一起的。