如何获取MUI X Data Grid指定单元格编辑后的更新值

你代码里的getValue是自行声明的空函数，并非MUI Data Grid提供的官方API，自然无法获取单元格修改后的值。要正确拿到编辑值，需要通过Grid暴露的API实例调用官方方法，具体修改步骤如下：

• 首先引入API引用钩子，初始化后绑定到DataGrid实例，再传递给自定义工具栏，即可在保存逻辑中调用取值方法。
• 注意取值操作要放在切换单元格回视图模式之前执行，避免编辑态的临时值被框架清空。

具体代码修改 #

1. 导入并初始化API引用 #

在原有导入语句中新增useGridApiRef：

import { DataGrid, GridCellModes, useGridApiRef } from '@mui/x-data-grid';

在Donees组件内初始化API引用：

export default function Donees() {
  const [selectedCellParams, setSelectedCellParams] = React.useState(null);
  const [cellModesModel, setCellModesModel] = React.useState({});
  const apiRef = useGridApiRef(); // 新增API引用
  // 其他原有状态、逻辑保持不变

2. 传递API实例到组件树 #

将apiRef绑定到DataGrid组件，同时传递给自定义工具栏：

<DataGrid
  apiRef={apiRef} // 绑定API引用到DataGrid
  rows={tableData}
  columns={columns}
  getRowId={(row) => row._id}
  onCellKeyDown={handleCellKeyDown}
  cellModesModel={cellModesModel}
  components={{
    Toolbar: EditToolbar,
  }}
  componentsProps={{
    toolbar: {
      cellMode,
      selectedCellParams,
      setSelectedCellParams,
      cellModesModel,
      setCellModesModel,
      apiRef, // 传递API引用给工具栏
    },
    cell: {
      onFocus: handleCellFocus,
    },
  }}
  experimentalFeatures={{ newEditingApi: true }}
/>

3. 修改工具栏保存逻辑 #

修改EditToolbar组件接收apiRef参数，在保存逻辑中调用官方API取值，同步更新PropTypes校验：

function EditToolbar(props) {
  // 新增接收apiRef参数
  const { selectedCellParams, cellMode, cellModesModel, setCellModesModel, apiRef } = props;

  const handleSaveOrEdit = () => {
    if (!selectedCellParams) {
      return;
    }
    const { id, field } = selectedCellParams;
    if (cellMode === 'edit') {
      // 调用官方API获取单元格最新值，注意要在切换视图模式前执行
      const updatedValue = apiRef.current.getCellValue(id, field);
      // 如果需要获取未提交的编辑态临时值，使用下面这行替代
      // const updatedValue = apiRef.current.state.editRows[id][field].value;

      console.log('单元格更新后的值：', updatedValue);
      // 此处直接编写PUT请求逻辑即可，例如：
      // axios.put(`http://localhost:4000/donees/${id}`, { [field]: updatedValue })

      setCellModesModel({
        ...cellModesModel,
        [id]: { ...cellModesModel[id], [field]: { mode: GridCellModes.View } },
      });

    } else {
      setCellModesModel({
        ...cellModesModel,
        [id]: { ...cellModesModel[id], [field]: { mode: GridCellModes.Edit } },
      });
    }
  };

  // handleCancel、handleMouseDown和返回的JSX逻辑保持不变
}

// 更新PropTypes定义
EditToolbar.propTypes = {
  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
  cellModesModel: PropTypes.object.isRequired,
  selectedCellParams: PropTypes.shape({
    field: PropTypes.string.isRequired,
    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
  }),
  setCellModesModel: PropTypes.func.isRequired,
  apiRef: PropTypes.object.isRequired, // 新增apiRef校验
};

最佳实践建议 #

如果不需要单独控制单元格编辑的工具栏逻辑，更推荐直接使用DataGrid内置的processRowUpdate回调处理保存请求：

• 该回调会在单元格退出编辑模式、提交修改时自动触发
• 回调参数直接返回更新后的整行数据和原始行数据，不需要手动取值，稳定性更高
  示例代码：

<DataGrid
  // 其他原有props不变
  processRowUpdate={(updatedRow, originalRow) => {
    // 直接拿到更新后的整行数据发请求
    axios.put(`http://localhost:4000/donees/${updatedRow._id}`, updatedRow);
    return updatedRow;
  }}
  onProcessRowUpdateError={(error) => {
    console.error('数据更新失败：', error);
  }}
/>

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