单击复选框不会立即选中复选框
Click on checkbox is not checking checkbox instantly
当我单击 table 行的复选框时,我正在使用 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>
),
}}
/>
用spread operator
代替return新数组push
else {
return [...selectedData, id];
}
您return在行
中引用相同的数组selectedData.push(id);
return selectedData;
这不会导致组件重新呈现,您应该 return 一个包含新项目的新数组,使用 spread operator
或 Array Cloning
spread operator
:
return [...selectedData,id];
Cloning
:
const newArray = Array.from(selectedData);
newArray.push(id);
return newArray;