AG Grid React+TypeScript中实现失去焦点或点击别处时保留单元格编辑值的问题

嘿，我之前也踩过这个坑！其实核心原因很简单——AG Grid不会自动帮你把编辑后的内容同步到数据源里，你得手动把新值更新到你的React状态中，不然一旦失去焦点，组件重新渲染就会用原来的旧数据回填单元格，自然就看不到编辑后的内容啦。下面给你一步步解决：

一、先确认列配置是否正确开启编辑 #

首先检查你的第三列"Value"的列定义，必须要开启editable: true，这样单元格才允许编辑：

const columnDefs = [
  { headerName: '列1', field: 'col1' },
  { headerName: '列2', field: 'col2' },
  { 
    headerName: 'Value', 
    field: 'value', 
    editable: true, // 这一步不能忘，开启单元格编辑权限
    cellEditor: 'agTextCellEditor' // 可选，默认就是文本编辑器，也可以指定其他编辑器
  }
];

二、关键：用onCellValueChanged事件同步数据到状态 #

这是解决问题的核心！当单元格编辑完成（包括失去焦点触发的编辑结束），AG Grid会触发onCellValueChanged事件，你要在这个事件里把新值同步到你的React数据源状态中。

给你个完整的组件示例，用TypeScript+函数式组件：

import { useState } 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';

// 定义你的行数据类型
interface GridRow {
  col1: string;
  col2: string;
  value: string;
}

const MyEditableGrid = () => {
  // 初始化数据源状态
  const [rowData, setRowData] = useState<GridRow[]>([
    { col1: '第一行', col2: '测试数据1', value: 'Initial Value 1' },
    { col1: '第二行', col2: '测试数据2', value: 'Initial Value 2' }
  ]);

  // 处理单元格值变化的回调
  const handleCellValueChange = (params: any) => {
    // 找到当前编辑行在数据源中的索引
    const targetIndex = rowData.findIndex(row => row === params.node.data);
    if (targetIndex === -1) return;

    // React状态不可直接修改，要创建新数组更新
    const updatedData = [...rowData];
    // 把编辑后的行数据替换进去
    updatedData[targetIndex] = params.data;
    // 更新状态
    setRowData(updatedData);
  };

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 700 }}>
      <AgGridReact
        rowData={rowData}
        columnDefs={columnDefs}
        onCellValueChanged={handleCellValueChange} // 绑定事件
      />
    </div>
  );
};

export default MyEditableGrid;

三、几个容易踩的坑要注意 #

• 绝对不能直接修改rowData数组：React状态是不可变的，必须通过复制新数组再更新，不然AG Grid可能检测不到数据变化，还是会显示旧值
• 确保你的数据接口和列定义的field完全匹配：比如列的field是value，你的GridRow接口里必须有value字段，不然数据映射会出错
• 如果用的是类组件，逻辑是一样的：把rowData存在this.state里，在onCellValueChanged里调用this.setState更新即可
• 要是用了Redux这类状态管理工具，记得在reducer里按照不可变原则处理数据更新，原理和React本地状态一致

现在你再去测试：编辑单元格输入"Initial Value 1 Edited"，然后点击别处或者失去焦点，单元格就会稳稳保留你编辑后的内容啦！

内容来源于stack exchange