在MUI中使用renderEditCell自定义组件时如何实现联动singleSelect

Got it, let's break down how to fix this linked select issue when using custom edit components in MUI DataGrid. The core problem here is that when you switch to custom renderEditCell components, the default row data doesn't update until you save the edit—so you need to tap into the DataGrid's internal edit state to get the latest selected value from the first field.

Here's the adjusted code and explanation to make this work:

Step 1: Sync the "Type" Column with DataGrid's Edit State #

First, update your custom Autocomplete for the type field to properly update the DataGrid's edit state and trigger a refresh for the linked account column:

{
  field: 'type',
  headerName: 'Type auto',
  type: 'singleSelect',
  editable: true,
  renderEditCell: (params: GridRenderEditCellParams) => {
    const valueOptions = ['Income', 'Expense'];
    return (
      <Autocomplete
        disablePortal
        options={valueOptions}
        // Bind the current edit value to keep the component in sync
        value={params.value}
        onChange={(event, newValue) => {
          // Update DataGrid's internal edit state with the new type value
          params.api.setEditCellValue({
            id: params.id,
            field: params.field,
            value: newValue,
          });
          // Force the account column cell to refresh and pick up the new type
          params.api.refreshCell(params.id, 'accounta');
        }}
        sx={{ width: params.colDef.width }}
        renderInput={(inputParams) => <TextField {...inputParams} label="Type" />}
      />
    );
  },
},

Step 2: Fetch the Latest Type Value for the "Account" Column #

For the accounta column, retrieve the current in-edit value of type (not just the original row data) to generate dynamic options:

{
  field: 'accounta',
  headerName: 'Account auto',
  type: 'singleSelect',
  editable: true,
  renderEditCell: (params: GridRenderEditCellParams) => {
    // Prioritize the active edit value of "type" (if exists) over the original row value
    const currentType = params.api.getEditCellValue(params.id, 'type') ?? params.row.type;
    
    // Generate options based on the currently selected type
    const valueOptions = currentType === 'Income'
      ? ['Sales', 'Investments', 'Ads']
      : ['Taxes', 'Payroll', 'Utilities', 'Marketing'];

    return (
      <Autocomplete
        disablePortal
        options={valueOptions}
        // Bind the current edit value for the account field
        value={params.value}
        onChange={(event, newValue) => {
          // Update DataGrid's edit state with the new account value
          params.api.setEditCellValue({
            id: params.id,
            field: params.field,
            value: newValue,
          });
        }}
        sx={{ width: params.colDef.width }}
        renderInput={(inputParams) => <TextField {...inputParams} label="Account" />}
      />
    );
  },
},

Why This Works #

• setEditCellValue: This updates the DataGrid's temporary edit state, which stores unsaved changes. This ensures the latest type selection is immediately available to other columns.
• refreshCell: Triggers a re-render of the account column cell when the type changes, so it recalculates options with the new value.
• getEditCellValue: Pulls the active edit value of the type field. If no edit is in progress (like initial load), it falls back to the original row.type value.

Quick Checks #

• Ensure your DataGrid has editMode set (either "cell" or "row" based on your workflow).
• Always bind the value prop of the Autocomplete to params.value to keep the component aligned with the DataGrid's state.

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