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

发布于 2025-01-18 04:31:07 字数 793 浏览 0 评论 0原文

我有一个标题复选框，应充当全选或取消全选的作用。当选择了一些记录但不是全部记录时，我也有一个不确定的状态。

我想要的行为是：

当用户在处于不确定状态时点击标题复选框时，它应该取消选择所有记录。但相反，它正在选择全部。

<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 是选定的行数。

行为描述图片

原文

I have a header checkbox that should act as a select all or deselect all. I also have an indeterminate state for it when some records are selected but not all.

The behavior I want is:

When the user taps on the header checkbox while it is in the indeterminate state, it should deselect all the records. But instead, it is selecting all.

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

Below is the code for onSelectAllClick

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

numSelected is the number of rows selected.

Description Image of Behavior

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

权谋诡计 2025-01-25 04:31:08

// 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 上添加条件

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

then you can add conditions on onChange like this

回复收藏 0 原文

很糊涂小朋友 2025-01-25 04:31:08

也许我为时已晚，但是您可以使用toggleallpagerowsselected（）或togglePagerowsSelected（）来自userOwsElect（ https://react-table-v7.tanstack.com/docs/api/api/userowselect ）

const checked = nbSelectedRows === page.length;

const onChange = (event) => {
    if (indeterminate && event.target.checked === true) toggleAllPageRowsSelected(false);
    if (checked === true) toggleAllPageRowsSelected(false);
    if (checked === false && !indeterminate) toggleAllPageRowsSelected(true);
    };

<Checkbox            .
   checked={checked}
   indeterminate={indeterminate}
   onChange={(e) => { onChange(e, checked); }}
/>

-table-v7.tanstack.com/docs/api/userowselect“ rel = ”

Maybe I am too late but you can use toggleAllPageRowsSelected() or togglePageRowsSelected() from useRowSelect (https://react-table-v7.tanstack.com/docs/api/useRowSelect)

const checked = nbSelectedRows === page.length;

const onChange = (event) => {
    if (indeterminate && event.target.checked === true) toggleAllPageRowsSelected(false);
    if (checked === true) toggleAllPageRowsSelected(false);
    if (checked === false && !indeterminate) toggleAllPageRowsSelected(true);
    };

<Checkbox            .
   checked={checked}
   indeterminate={indeterminate}
   onChange={(e) => { onChange(e, checked); }}
/>

Something like this

回复收藏 0 原文

~没有更多了~