在不确定状态下点击复选框时如何将状态更改为 unchecked/false。反应 MUI 复选框

Question

我有一个 header 复选框，它应该充当 select 全部或取消 select 全部。当一些记录被 selected 但不是全部时，我也有一个不确定的状态。

我想要的行为是：

当用户在 indeterminate 状态下点击 header 复选框时，它应该取消 select 所有记录。但相反，它是 select 全部。

<Checkbox
    indeterminate={numSelected > 0 && numSelected < rowCount}
    checked={rowCount > 0 && numSelected === rowCount}
    onChange={onSelectAllClick}
/>

下面是 onSelectAllClick

的代码

const onSelectAllClick= (event) => {
    if (event.target.checked) {
        const newSelectedRecords= records.map((r) => n.serialNumber);
        setSelected(newSelectedRecords);
    } else {
        setSelected([]);
    }
};

numSelected 是行数 selected.

Description Image of Behavior

Answer 1

// can useMemo
const indeterminate = numSelected > 0 && numSelected < rowCount
const onSelectAllClick= (event) => {
 if (event.target.checked && !indeterminate ) {
    const newSelectedRecords= records.map((r) => n.serialNumber);
    setSelected(newSelectedRecords);
 } else {
    setSelected([]);
 }
};

<Checkbox
    indeterminate={indeterminate}
    checked={rowCount > 0 && numSelected === rowCount}
    onChange={onSelectAllClick}/>

然后你可以像这样在 onChange 上添加条件

在不确定状态下点击复选框时如何将状态更改为 unchecked/false。反应 MUI 复选框

How to change state to unchecked/false when tapping on a checkbox in indeterminate state. React MUI Checkbox

checkbox

reactjs

material-ui