如何在React AGGrid中取消选中所有行或轻松重载表格？

核心思路 #

AGGrid的选中状态由内部API独立管理，直接用setState无法同步表格内部状态，必须调用官方提供的API来操作。

实现步骤 #

1. 获取AGGrid实例

使用useRef（函数组件）或createRef（类组件）拿到表格的引用，以此调用其内部API：

// 函数组件示例
import { useRef } from 'react';
import { AgGridReact } from 'ag-grid-react';

const GridComponent = () => {
  const gridRef = useRef(null);

  return (
    <div className="ag-theme-alpine">
      <AgGridReact
        ref={gridRef}
        columnDefs={[
          { headerName: '选择', field: 'id', checkboxSelection: true },
          // 你的其他列配置
        ]}
        rowData={yourRowData}
      />
      <button onClick={clearAllSelection}>清空选中</button>
    </div>
  );
};

2. 编写清空选中的方法

调用AGGrid的deselectAll() API清除所有选中行：

const clearAllSelection = () => {
  // 确保API存在再调用，避免报错
  if (gridRef.current?.api) {
    gridRef.current.api.deselectAll();
  }
};

类组件版本

如果使用类组件，写法如下：

import React, { Component } from 'react';
import { AgGridReact } from 'ag-grid-react';

class GridComponent extends Component {
  constructor(props) {
    super(props);
    this.gridRef = React.createRef();
  }

  clearAllSelection = () => {
    if (this.gridRef.current?.api) {
      this.gridRef.current.api.deselectAll();
    }
  };

  render() {
    return (
      <div className="ag-theme-alpine">
        <AgGridReact
          ref={this.gridRef}
          columnDefs={[
            { headerName: '选择', field: 'id', checkboxSelection: true },
            // 其他列配置
          ]}
          rowData={this.props.rowData}
        />
        <button onClick={this.clearAllSelection}>清空选中</button>
      </div>
    );
  }
}

为什么直接用setState无效？ #

AGGrid的选中状态是内部维护的独立状态，外部setState无法触发表格内部的状态更新逻辑，只有通过官方API操作，才能保证表格UI和内部数据的一致性。

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