React-data-grid按下Enter键聚焦下一行首列报错问题求助

问题原因 #

React Data Grid默认Enter键行为是移动到当前行的下一列，处于最后一列时没有下一列可跳转，因此触发报错。需要自定义键盘事件逻辑覆盖默认行为。

实现步骤 #

1. 通过apiRef获取DataGrid的API实例，用于控制单元格焦点。
2. 监听onCellKeyDown事件，判断当前是否处于最后一列且按下Enter键。
3. 阻止默认行为避免报错，计算下一行索引后调用setCellFocus跳转到下一行首列。
4. 可选处理最后一行的边界情况。

代码示例 #

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

export default function App() {
  const apiRef = useRef(null);

  const handleCellKeyDown = (params, event) => {
    const { colDef, rowIndex, columns } = params;
    // 判定当前为最后一列且按下Enter键
    if (colDef.field === columns.at(-1).field && event.key === 'Enter') {
      event.preventDefault();
      const nextRowIndex = rowIndex + 1;
      // 检查下一行是否存在
      if (nextRowIndex < params.api.getRowsCount()) {
        // 跳转至下一行首列
        apiRef.current.setCellFocus(nextRowIndex, columns[0].field);
      } else {
        // 可选：最后一行时跳转到第一行首列，注释掉则不处理
        // apiRef.current.setCellFocus(0, columns[0].field);
      }
    }
  };

  // 列定义示例
  const columns = [
    { field: 'id', headerName: 'ID', width: 70 },
    { field: 'firstName', headerName: 'First name', width: 130 },
    { field: 'lastName', headerName: 'Last name', width: 130 },
    { field: 'age', headerName: 'Age', type: 'number', width: 90 },
  ];

  // 行数据示例
  const rows = [
    { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
    { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
    { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
    { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
  ];

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        apiRef={apiRef}
        onCellKeyDown={handleCellKeyDown}
        editable
      />
    </div>
  );
}

关键说明 #

• apiRef：获取DataGrid核心API，通过setCellFocus(rowIndex, field)方法直接设置指定单元格焦点。
• onCellKeyDown：单元格键盘事件回调，拦截Enter键默认行为，实现自定义跳转逻辑。
• 边界处理：处于最后一行时，可根据业务需求选择跳转到第一行或保持焦点不动。

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