React TSX项目中动态控制MUI X DataGrid列的可编辑性

核心思路是让answer列的可编辑状态依赖对应行的isRelyChatGpt勾选状态，具体修改步骤如下：

1. 修改answer列的可编辑规则 #

把原来固定的editable: true改为动态判断的函数，根据当前行的isRelyChatGpt值决定是否允许编辑：

{ 
  field: 'answer', 
  headerName: 'Answer', 
  width: 600, 
  // 勾选AI依赖时，answer列不可编辑；反之可编辑
  editable: (params) => !params.row.isRelyChatGpt 
},

2. 优化列配置的响应式（推荐） #

因为列的编辑状态依赖行数据，用useMemo包裹列配置，确保行数据更新时列配置同步更新，避免无效重渲染：

import { useMemo } from 'react';

// ...

const qacolumns = useMemo<GridColDef[]>(() => [
  { field: 'gid', headerName: 'ID', width: 50 },
  { field: 'questionText', headerName: 'Question', width: 600, editable: true },
  { field: 'answer', headerName: 'Answer', width: 600, editable: (params) => !params.row.isRelyChatGpt },
  { field: 'isRelyChatGpt', headerName: 'Relay on AI', width: 100, renderCell: RelayOnAICell },
  { field: 'delete', headerName: 'Delete', width: 70, renderCell: DeleteCell },
], [qaRowdata]);

3. 保留原事件处理器逻辑 #

原handleRelayOnAIChange已经正确实现了行数据的isRelyChatGpt状态更新，状态变化后，useMemo会重新生成列配置，DataGrid会自动应用新的编辑规则。

完整修改后代码片段 #

import { useState, useMemo } from 'react';
import { DataGrid, GridColDef, GridRenderCellParams } from '@mui/x-data-grid';
import Checkbox from '@mui/material/Checkbox';

// ...

const [qaRowdata, setQaRowData] = useState<any[]>([]);

const qacolumns = useMemo<GridColDef[]>(() => [
  { field: 'gid', headerName: 'ID', width: 50 },
  { field: 'questionText', headerName: 'Question', width: 600, editable: true },
  { field: 'answer', headerName: 'Answer', width: 600, editable: (params) => !params.row.isRelyChatGpt },
  { field: 'isRelyChatGpt', headerName: 'Relay on AI', width: 100, renderCell: RelayOnAICell },
  { field: 'delete', headerName: 'Delete', width: 70, renderCell: DeleteCell },
], [qaRowdata]);

// ...

<DataGrid
  rows={qaRowdata}
  editMode="row"
  columns={qacolumns}
  getRowId={(row) => row.gid}
  processRowUpdate={(updatedRow, originalRow) => QARowUpdate(updatedRow, originalRow)}
/>

function RelayOnAICell(params: GridRenderCellParams) {
  return <Checkbox checked={params.row.isRelyChatGpt} onChange={(e) => handleRelayOnAIChange(e, params.row.gid)} />;
}

const handleRelayOnAIChange = (e: React.ChangeEvent<HTMLInputElement>, rowId: number) => {
  const updatedQaRowData = qaRowdata.map((row) => {
    if (row.gid === rowId) {
      return { ...row, isRelyChatGpt: e.target.checked };
    }
    return row;
  });

  setQaRowData(updatedQaRowData);
};

效果说明 #

勾选某行的Relay on AI复选框后，该行的Answer列会立即变为不可编辑状态；取消勾选则恢复可编辑权限。

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