第二次点击后反应复选框被（取消）选中答案

【问题标题】：React checkbox get (un)checked after the second click第二次点击后反应复选框被（取消）选中
【发布时间】：2019-11-23 10:46:39
【问题描述】：

下面是列出动态复选框的反应组件部分：

   <div className="pb-4">
       <p>Choose the task owner(s):</p>
       {
           peerIds.map(id => {
               if (currentUserId != id)
                   return (
                       <label className="checkbox-inline mr-3">
                           <input onChange={onChange_TaskOwner}
                               type="checkbox"
                               name="taskowner"
                               checked={st_taskOwnersId.filter(function (item) {return (item == id)}).length > 0}
                               value={peers[id].id} />
                           <span>{peers[id].fullName}</span>
                       </label>

                   )
           })
       }
       <div style={{ clear: 'both' }}></div>
   </div>

在上面的代码中，如果当前 id 已经处于名为 st_taskOwnersId 的钩子状态对象中，我将 checked 设置为 false/true。

我使用hook 存储检查项目的ID，如下所示。 onChange_TaskOwner 函数根据是checked 还是unchecked 来更新st_taskOwnersId：

const [st_taskOwnersId, set_taskOwnersId] = useState([] as any);

const onChange_TaskOwner = (event) => {
    event.preventDefault();
    if (event.target.checked)
        set_taskOwnersId([...st_taskOwnersId, event.target.value]);
    else
        set_taskOwnersId(st_taskOwnersId.filter(function (item) {
            return (item != event.target.value);
        }));
}

代码运行没有错误。唯一的问题是我必须单击两次才能选中/取消选中复选框。我不知道为什么会这样。有什么帮助吗？

【问题讨论】：

我看到的一个问题是您没有在重复元素上设置key。还应该使用some() 而不是filter().length。在迭代次数和内存方面效率更高
尝试使用camelCase、!==、===，无需声明function，使用短语法。也许放一些沙箱，因为错误可能来自另一个地方......
@charlietfl 感谢您的帮助。我根据两个cmets做了更改，但问题没有解决。不过，我必须点击两次。你看到关于使用hook 的任何问题？
您确认onChange_TaskOwner() 每次都被解雇了吗？如果没有沙盒中可重现的示例，很难提供更多帮助

标签： javascript html reactjs checkbox checkboxlist

【解决方案1】：

我相信问题出在onChange_TaskOwner 函数上。您应该删除event.preventDefault(); 调用。

我试图在这个codepen 上重现你的组件，没有event.preventDefault(); 工作正常，如果你添加它，同样的错误开始发生。

【讨论】：

谢谢！虽然不确定why 它的行为与preventDefault 一样。
只需在 codepen 的 onChange 函数中添加 preventDefault ，您就会发现原因。至少，其中之一，不确定。
抱歉，why 在我的评论中缺失 :) 再次感谢！