如何在MUI Data Grid v6编辑模式下修改单元格时同步更新另一单元格

要实现选择category列的下拉值后自动填充到remark列的编辑输入框，核心是直接更新**受控的rowModesModel**中的临时编辑值——行编辑模式下，输入框内容由rowModesModel里的editModel字段控制，而非原始行数据。

修改步骤： #

1. 给category列添加onCellEditCommit事件监听，捕获选中的新值和当前行ID
2. 在事件回调中更新rowModesModel，将对应行的remark临时编辑值设置为新的category值

修改后的完整代码片段： #

const columns: GridColDef[] = [
  {
    field: 'category',
    headerName: 'Category',
    type: 'singleSelect',
    flex: 2,
    editable: true,
    valueOptions: ['First', 'Second', 'Third'],
    // 添加单元格编辑提交事件
    onCellEditCommit: (params) => {
      const { id, value: newCategory } = params;
      // 更新rowModesModel中的临时编辑值
      setRowModesModel(prevModel => ({
        ...prevModel,
        [id]: {
          ...prevModel[id],
          editModel: {
            // 保留其他已编辑字段的值，只更新remark
            ...prevModel[id]?.editModel,
            remark: newCategory
          }
        }
      }));
    }
  },
  {
    field: 'remark',
    headerName: 'Remark',
    type: 'string',
    flex: 2,
    editable: true
  },
  {
    field: 'actions',
    headerName: 'Actions',
    type: 'actions',
    flex: 1,
    getActions: ({ id }) => { /*...*/ },
  },
];

// ...

<DataGrid
  rows={rows}
  columns={columns}
  editMode="row"
  rowModesModel={rowModesModel}
  onRowModesModelChange={handleRowModesModelChange}
  onRowEditStop={handleRowEditStop}
  processRowUpdate={processRowUpdate}
  slots={{
    toolbar: EditToolbar,
  }}
  slotProps={{
    toolbar: { setRows, setRowModesModel },
  }}
/>

原理说明： #

• rowModesModel是受控状态，存储了每行的编辑模式和临时编辑值（editModel）
• 当category列编辑完成后，通过setRowModesModel更新对应行的remark临时值，Data Grid会自动将这个值同步到remark列的输入框中
• 该方式不会修改原始rows数据，只会更新编辑状态下的临时值，符合行编辑的流程逻辑

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