能否无需双击即可编辑MUI X Data Grid的单元格？

该需求完全可以实现，以下是两种场景的具体实现方案：

方案1：单元格始终保持编辑模式 #

MUI X Data Grid支持自定义单元格渲染逻辑，你可以跳过默认的「查看/编辑」状态切换，直接在单元格内渲染编辑态组件：

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

const columns = [
  {
    field: 'username',
    headerName: '用户名',
    width: 200,
    editable: true,
    // 直接渲染编辑态输入框，无需触发编辑动作
    renderCell: (params) => {
      return (
        <TextField
          value={params.value ?? ''}
          onChange={(e) => {
            // 直接调用API同步更新单元格数据
            params.api.setEditCellValue({
              id: params.id,
              field: params.field,
              value: e.target.value
            });
          }}
          variant="standard"
          fullWidth
          size="small"
        />
      );
    }
  },
  // 其他列配置
];

// 组件内使用
function CustomGrid() {
  return <DataGrid rows={rows} columns={columns} />;
}

如果是下拉选择、日期选择等其他编辑类型，替换TextField为对应MUI输入组件即可，数据同步逻辑保持一致。

方案2：鼠标悬停触发编辑模式 #

可以通过Data Grid内置的单元格鼠标事件，手动调用API切换编辑状态：

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

const columns = [
  {
    field: 'username',
    headerName: '用户名',
    width: 200,
    editable: true,
  },
  // 其他列配置
];

function CustomGrid() {
  return (
    <DataGrid
      rows={rows}
      columns={columns}
      // 鼠标进入单元格时触发编辑
      onCellMouseEnter={(params) => {
        // 跳过非可编辑列、复选框列等不需要编辑的单元格
        if (!params.colDef.editable || params.field === '__check__') return;
        params.api.startCellEditMode({
          id: params.id,
          field: params.field
        });
      }}
      // 可选配置：鼠标离开单元格时退出编辑模式
      onCellMouseLeave={(params) => {
        if (!params.colDef.editable || params.field === '__check__') return;
        params.api.stopCellEditMode({
          id: params.id,
          field: params.field
        });
      }}
    />
  );
}

如果需要避免多个单元格同时进入编辑态，可以额外用状态变量记录当前正在编辑的单元格坐标，每次触发新的编辑前先关闭上一个编辑态即可。

内容的提问来源于stack exchange，提问作者Endre Kovács