如何在组件 DataGrid MUI 中完全禁用键盘使用

Question

我有一个组件DataGrid MUI，我在其中使用editMode =“row”

<DataGrid
rows = { rows }
editMode = "row"
rowModesModel = { rowModesModel }
onRowModesModelChange = { handleRowModesModelChange }
onRowEditStop = { handleRowEditStop }
processRowUpdate = { processRowUpdate }
/>

如何禁用键盘使用？

Answer 1

为了确保 Material-UI DataGrid 组件中完全禁用键盘使用，包括通过键盘插入，我们可以调整实现以更全面地处理键盘事件。

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

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 },
];

const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  { field: 'firstName', headerName: 'First name', width: 150 },
  { field: 'lastName', headerName: 'Last name', width: 150 },
  { field: 'age', headerName: 'Age', type: 'number', width: 90 },
];

function handleCellNavigation(event) {
  if (event.key.startsWith('Arrow')) {
    event.stopPropagation();
    event.preventDefault();
  }
}

function handleInsertion(event) {
  if (!event.metaKey && !event.ctrlKey) {
    event.stopPropagation();
    event.preventDefault();
  }
}

function App() {
  return (
    <div>
      <DataGrid
        rows={rows}
        columns={columns}
        disableColumnMenu
        disableColumnSelector
        onKeyDown={handleCellNavigation}
        onKeyPress={handleInsertion}
      />
    </div>
  );
}

export default App;