React Hook中Ag-Grid：如何创建获取行数据按钮并获取编辑后全量行数据？

核心实现方案 #

结合React Hook状态管理与Ag-Grid内置API，实现单元格编辑后的数据自动同步，以及手动触发获取行数据的功能。

完整代码示例 #

import { useState, useRef } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const GridDemo = () => {
  // 存储行数据的状态，编辑后自动同步更新
  const [rowData, setRowData] = useState([
    { id: 1, name: '张三', age: 25 },
    { id: 2, name: '李四', age: 30 },
    { id: 3, name: '王五', age: 28 }
  ]);
  // 保存Ag-Grid实例的ref，用于调用API
  const gridRef = useRef();

  // 表格初始化完成后保存API实例
  const onGridReady = (params) => {
    gridRef.current = params.api;
  };

  // 单元格编辑完成后同步更新状态
  const onCellValueChanged = (params) => {
    const updatedRowData = rowData.map(row => 
      row.id === params.data.id ? { ...row, [params.colDef.field]: params.newValue } : row
    );
    setRowData(updatedRowData);
  };

  // 「获取行数据」按钮点击事件
  const handleGetRowData = () => {
    // 方式1：直接用已同步的state数据
    console.log('当前所有行数据:', rowData);
    
    // 方式2：通过Ag-Grid API获取最新数据
    // const latestData = [];
    // gridRef.current.forEachNode(node => latestData.push(node.data));
    // console.log('当前所有行数据:', latestData);
  };

  // 列配置
  const columnDefs = [
    { field: 'id', headerName: 'ID', editable: false },
    { field: 'name', headerName: '姓名', editable: true },
    { field: 'age', headerName: '年龄', editable: true }
  ];

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <button onClick={handleGetRowData} style={{ margin: '10px 0' }}>获取行数据</button>
      <AgGridReact
        rowData={rowData}
        columnDefs={columnDefs}
        onGridReady={onGridReady}
        onCellValueChanged={onCellValueChanged}
      />
    </div>
  );
};

export default GridDemo;

关键细节说明 #

• 编辑同步逻辑：通过onCellValueChanged事件监听单元格编辑完成动作，遍历原数组生成更新后的新数组，调用setRowData更新状态，保证rowData始终与表格内容一致。
• 行数据获取：点击按钮时可直接读取rowData状态（已同步编辑内容），也可通过Ag-Grid的forEachNodeAPI遍历节点获取数据，两种方式任选。
• Grid实例管理：用useRef存储Grid API实例，方便后续调用Ag-Grid的各类内置方法。

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