React 钩子将映射的复选框值添加到数组或删除它答案

【问题标题】：React hooks add mapped checkbox values to array or remove itReact 钩子将映射的复选框值添加到数组或删除它
【发布时间】：2021-07-08 21:12:33
【问题描述】：

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

我的 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])

【问题讨论】：

您说“复选框”，但您的代码只有一个复选框。你能发布一个代码框来演示这个问题吗？
它在一个数组映射中。所以有多个复选框。抱歉，代码不完整。
你能发布一些完整的代码吗？

标签： javascript arrays reactjs react-hooks

【解决方案1】：

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

const [selected, setSelected] = useState([]);

const handleChange = event => {
    const { checked, value } = event.currentTarget;

    setSelected(
      prev => checked
        ? [...prev, value]
        : prev.filter(val => val !== value)
    );
};

Here is a demo on StackBlitz 展示了它们是如何组合在一起的。

【讨论】：