css 未选中多复选框

omjgkv6w 于 2023-03-05 发布在其他

关注(0)|答案(1)|浏览(190)

我在做一个简单的bootstrap表，我使用了这样的复选框。

选中的值保存在状态中，但复选框仍然未选中，这是我的问题。

现在，当我单击复选框时，我对状态中的值进行排序，但我面临的问题是，当我双击复选框时，它会变成勾选，而当我单击复选框时，它不会勾选。
我的代码：

const handelAddSelectOrders = (e, data) => {
    e.preventDefault();

    const isChecked = e.target.checked;
    setSelectedOrders((prevSelectedOrders) => {
      if (isChecked) {
        return [...prevSelectedOrders, data];
      } else {
        return prevSelectedOrders.filter((item) => item !== data);
      }
    });
  };

    <input onChange={(e) => handelAddSelectOrders(e, el)} className="form-check-input"
      value={el?._id} type="checkbox" name={`${el?._id}`} checked={selectedOrders.includes(el)}
     />

css

来源：https://stackoverflow.com/questions/75633798/multi-checkbox-are-not-getting-checked

1条答案

按热度按时间

z2acfund1#

这个问题似乎与双击复选框时触发两次onChange事件有关。一个可能的解决方案是检查事件对象的clickCount属性，以检测它是否是双击事件。

const handelAddSelectOrders = (e, data) => {
  e.preventDefault();

  const isChecked = e.target.checked;
  const clickCount = e.detail || e.originalEvent.detail; // Check for double-click

  setSelectedOrders((prevSelectedOrders) => {
    if (isChecked && clickCount === 1) { // Only add item on single-click
      return [...prevSelectedOrders, data];
    } else {
      return prevSelectedOrders.filter((item) => item !== data);
    }
  });
};

<input
  onChange={(e) => handelAddSelectOrders(e, el)}
  className="form-check-input"
  value={el?._id}
  type="checkbox"
  name={`${el?._id}`}
  checked={selectedOrders.includes(el)}
/>

首先检查事件对象的detail或originalEvent.Detail属性以检测它是否是双击事件，如果是单击事件，则继续前面的逻辑以更新selectedOrders。

赞(0）回复(0）举报 2023-03-05

我来回答

css 未选中多复选框

1条答案

相关问题

热门标签

最新问答