时间戳

首页 > 解决方案 > 单击复选框不会立即检查复选框

reactjs - 单击复选框不会立即检查复选框

问题描述

当我单击表格行的复选框时，我正在使用 id 更新数组 selecteddata ，然后我通过查找 id 是否存在于 selecteddata 中来传递选中的值以选中复选框。我可以将 id 存储在 selectedData 中，但它没有在复选框中显示实例更改。

const [selectedData, setSeletcedData] = useState([]);

  const handleCheckboxSelect = (id) => {
    setHasSelectedAll(false);
    setSeletcedData((selectedData) => {
      if (selectedData.includes(id)) {
        return selectedData.filter((currentId) => id !== currentId);
      } else {
        selectedData.push(id);
        return selectedData;
      }
    });
  };



<CDataTable
          items={matter}
          fields={fields}
          hover
          pagination
            count: (item) => (
              <CFormGroup variant="checkbox" className="checkbox">
                <CInputCheckbox
                  id="checkbox1"
                  name="checkbox1"
                  value="option1"
                  checked={selectedData.includes(item.id)}
                  onChange={(e) => handleCheckboxSelect(item.id)}
                />
              </CFormGroup>
            ),
          }}
        />

标签： reactjsreact-table

解决方案

您在该行中返回相同的数组引用

selectedData.push(id);
return selectedData;

这不会导致组件重新渲染，您应该返回一个带有新项目的新数组，使用spread operator 或Array Cloning

spread operator：

     return [...selectedData,id];

Cloning：

     const newArray = Array.from(selectedData);
     newArray.push(id);
     return newArray;

推荐阅读