在 MUI Data Grid v6 中更新另一个单元格时，如何在编辑模式下更新一个单元格？

Question

我正在使用 MUI Data Grid v6 组件并利用其内置的 CRUD 编辑功能。我有多个列，所有列都可以编辑。在类型为

singleSelect

的“类别”列中选择新值后，应将该值预先附加到类型为

string

的名为“备注”的第二列。

使用

valueSetter

和

valueGetter

更改行模型很容易，但我没有找到一种方法来更改“编辑行模型”并将更改直接应用于输入字段。

关于如何实现这一目标有什么想法吗？

这是我当前代码的摘录：

const columns: GridColDef[] = [
  {
    field: 'category',
    headerName: 'Category',
    type: 'singleSelect',
    flex: 2,
    editable: true,
    valueOptions: ['First', 'Second', 'Third'],
  },
  {
    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 },
  }}
/>

Answer 1

您是否尝试在

processRowUpdate

回调中实现该逻辑？

您可以在此处将更新后的行与原始行进行比较并应用必要的更改

<DataGrid
 processRowUpdate={(updatedRow, originalRow) => {
  if (updatedRow.category !== originalRow.category) {
   return {
    ...updatedRow,
    remark: `${updatedRow.category} FILL_MORE`
   }
  }
  return  updatedRow
 }}
/>

请注意，只有退出类别字段的编辑模式后，备注字段才会发生变化

Answer 2

这是我自己的（相当丑陋的）问题解决方案。它并不漂亮，但最终它按预期工作。也许它可以帮助有类似问题的人。

对于编辑单元格，我使用

Autocomplete

和一个名为

ValidatableEditInputCell

的自定义组件，但它也应该适用于任何其他组件。

我创建了变量

remarkPreset

，以便在输入更改后立即/暂时保存类别字段的值。当单元格的值更改时，所有单元格的所有

preProcessEditCellProps

回调都会被调用。这就是我读取预设值并通过

params.props.value = remarkPreset.value;

将其设置到备注字段的地方。

let remarkPreset: { id: GridRowId; value: string } | undefined;

const columns: GridColDef[] = [
  {
    field: 'category',
    headerName: 'Category',
    flex: 2,
    editable: true,
    renderEditCell: (params: GridRenderEditCellParams) => {
      <Autocomplete
        //...
        onChange={(event, newValue) => {
          remarkPreset = {
            id: params.id,
            value: newValue.category,
          };
          focusCell(params.id.toString(), 'remark');
        }}
      />
    },
  },
  {
    field: 'remark',
    headerName: 'Remark',
    flex: 2,
    editable: true,
    preProcessEditCellProps: async (params: GridPreProcessEditCellProps) => {
      if (remarkPreset && remarkPreset.id === params.id) {
        params.props.value = remarkPreset.value;
      }
      return { ...params.props, error: false };
    },
    renderEditCell: (params: GridRenderEditCellParams) => {
      if (
        remarkPreset != undefined &&
        remarkPreset.id === params.id &&
        remarkPreset.value === params.value
      ) {
        remarkPreset = undefined;
      }

      return (
        <ValidatableEditInputCell
          {...params}
          maxLength={40}
          defaultValue={remarkPreset?.id === params.id ? remarkPreset.value : undefined}
        />
      );
    },
  },
  {
    field: 'actions',
    headerName: 'Actions',
    type: 'actions',
    flex: 1,
    getActions: ({ id }) => { /*...*/ },
  },
];

const focusCell = (id: string, field: string) => {
  setTimeout(() => {
    const input = document.querySelector(
      `div.MuiDataGrid-row[data-id="${id}"] div[data-field="${field}"] input`
    ) as HTMLInputElement;
    input.focus();
  }, 50);
};

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