如何在MUI X Data Grid中通过GridCellParams获取单元格更新后的值

方法1：使用onCellEditCommit事件（推荐） #

这个事件会在单元格编辑完成（比如按Enter、失去焦点）时触发，参数里直接提供修改后的新值，同时还能拿到修改的字段名、行数据等信息，完全匹配只获取修改单元格的需求。

修改后的代码示例：

import * as React from 'react';
import { DataGrid, GridCellEditCommitParams, GridColDef, GridRowsProp } from '@mui/x-data-grid';

const columns: GridColDef[] = [
  { field: 'id', headerName: 'ID', width: 70, editable: true },
  { field: 'firstName', headerName: 'First Name', width: 150, editable: true },
  { field: 'lastName', headerName: 'Last Name', width: 150, editable: true },
  { field: 'age', headerName: 'Age', type: 'number', width: 90, editable: true },
];

const rows: GridRowsProp = [
  { id: 1, firstName: 'John', lastName: 'Doe', age: 25 },
  { id: 2, firstName: 'Jane', lastName: 'Doe', age: 22 },
  { id: 3, firstName: 'Bob', lastName: 'Smith', age: 30 },
];

const MyDataGrid: React.FC = () => {
  const handleCellEditCommit = (params: GridCellEditCommitParams) => {
    // params.value 是修改后的新值，params.oldValue 是旧值
    console.log('修改的字段:', params.field);
    console.log('新值:', params.value);
    console.log('所在行:', params.row);
  };

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        onCellEditCommit={handleCellEditCommit}
      />
    </div>
  );
};

export default MyDataGrid;

方法2：在onCellKeyDown中直接获取输入框的值 #

如果必须保留onCellKeyDown事件，可以通过事件目标获取编辑中的输入框当前值——编辑状态下单元格会渲染为input元素：

import * as React from 'react';
import { DataGrid, GridCellParams, GridColDef, GridRowsProp } from '@mui/x-data-grid';

const columns: GridColDef[] = [
  { field: 'id', headerName: 'ID', width: 70, editable: true },
  { field: 'firstName', headerName: 'First Name', width: 150, editable: true },
  { field: 'lastName', headerName: 'Last Name', width: 150, editable: true },
  { field: 'age', headerName: 'Age', type: 'number', width: 90, editable: true },
];

const rows: GridRowsProp = [
  { id: 1, firstName: 'John', lastName: 'Doe', age: 25 },
  { id: 2, firstName: 'Jane', lastName: 'Doe', age: 22 },
  { id: 3, firstName: 'Bob', lastName: 'Smith', age: 30 },
];

const MyDataGrid: React.FC = () => {
  const handleKeyDown = (params: GridCellParams, event: React.KeyboardEvent<HTMLDivElement>) => {
    if (event.key === 'Enter') {
      // 从输入框获取新值
      const inputElement = event.target as HTMLInputElement;
      const newValue = inputElement.value;
      // 处理数值类型（比如age字段）
      const parsedValue = params.colDef.type === 'number' ? Number(newValue) : newValue;
      
      console.log('Enter key pressed on row:', params.row);
      console.log('修改的字段:', params.field);
      console.log('新值:', parsedValue);
    }
  };

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        onCellKeyDown={(params, event) => handleKeyDown(params, event as React.KeyboardEvent<HTMLDivElement>)}
      />
    </div>
  );
};

export default MyDataGrid;

补充说明 #

• 方法1是官方推荐的编辑完成回调，能直接拿到标准化的新值，无需自行处理类型转换，更可靠。
• 方法2适合需要在按键瞬间处理的场景，但要注意类型转换（比如数字类型的字段需要转成Number），避免字符串类型的数值问题。

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