MUI X DataGrid如何通过onClick触发指定行编辑聚焦，社区版是否支持

该需求完全可以在社区版DataGrid中实现，无需升级到Pro或Premium付费版本。

实现前提 #

提前在列配置中为需要编辑的列设置editable: true属性，否则行编辑模式无法正常生效。

核心实现步骤 #

• 给DataGrid组件绑定apiRef属性，用于调用官方公开的实例API
• 在你需要的触发事件（行点击、按钮点击等）回调中，依次调用两个API：
  • 调用api.startRowEditMode({ id: 目标行ID })开启指定行的编辑状态
  • 调用api.setCellFocus(目标行ID, 要聚焦的列字段)将光标定位到目标单元格

代码示例 #

点击操作按钮触发编辑 #

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

const columns = [
  { field: 'name', headerName: '名称', editable: true },
  { field: 'age', headerName: '年龄', editable: true },
  {
    field: 'action',
    headerName: '操作',
    renderCell: (params) => (
      <button onClick={() => {
        // 开启当前行编辑
        params.api.startRowEditMode({ id: params.id });
        // 聚焦到当前行的name列
        params.api.setCellFocus(params.id, 'name');
      }}>
        编辑该行
      </button>
    )
  }
];

function MyGrid() {
  const rows = [
    { id: 1, name: '张三', age: 20 },
    { id: 2, name: '李四', age: 25 }
  ];

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        editMode="row"
      />
    </div>
  );
}

点击行任意位置触发编辑 #

只需在DataGrid组件上增加onRowClick事件监听即可：

<DataGrid
  rows={rows}
  columns={columns}
  editMode="row"
  onRowClick={(params) => {
    params.api.startRowEditMode({ id: params.id });
    params.api.setCellFocus(params.id, 'name');
  }}
/>

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