时间戳

首页 > 解决方案 > 第二次点击后反应复选框被（取消）选中

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

问题描述

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

   <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>

在上面的代码checked中，如果当前 id 已经处于名为st_taskOwnersId.

hook我使用如下方式存储检查项目的 ID 。onChange_TaskOwner函数更新st_taskOwnersId取决于它是checked还是unchecked：

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);
        }));
}

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

标签： javascripthtmlreactjscheckboxcheckboxlist

解决方案

我相信问题出在onChange_TaskOwner功能上。您应该删除event.preventDefault();呼叫。

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

推荐阅读