如何通过编程取消ReactDataGrid的所有行选中状态？

要实现“全取消”按钮，你可以通过表格的引用（tableRef）调用ReactDataGrid内置的setSelected方法，同时同步更新本地维护的选中状态，具体实现如下：

1. 定义清空选中状态的函数，调用表格实例的setSelected方法并传入空对象，同时重置本地selected状态
2. 给按钮绑定这个函数

修改后的完整代码示例：

import React, { useState, useCallback } from 'react';
import ReactDataGrid from '@inovua/reactdatagrid-community';

const YourComponent = () => {
    const [tableRef, setTableRef] = useState(null);
    const [selected, setSelected] = useState({});
    const cols = [/* 你的列配置 */];
    const data = [/* 你的数据源 */];

    const onSelectionChange = useCallback(({ selected: selectedMap }) => {
        setSelected(selectedMap);
    }, []);

    const clearAllSelection = () => {
        // 调用表格实例方法清空选中
        tableRef?.current?.setSelected({});
        // 同步更新本地状态
        setSelected({});
    };

    return (
        <>
            <button onClick={clearAllSelection}>全取消</button>
            <ReactDataGrid
                handle={tableRef}
                columns={cols}
                dataSource={data}
                checkboxColumn
                onSelectionChange={onSelectionChange}
            />
        </>
    );
};

export default YourComponent;

关键说明 #

• setSelected({})：ReactDataGrid的实例方法setSelected接受一个映射对象（键为行的唯一标识，值为选中状态），传入空对象会直接取消所有行的选中状态
• 同步更新本地selected状态是为了保证组件内部状态与表格状态一致，避免后续操作出现状态不一致的问题

内容的提问来源于stack exchange，提问作者Laekipia