在使用mui数据网格时，箭头键导航输入字段可能遇到问题：默认情况下，箭头键会滚动网格，影响用户体验。本文将介绍如何禁用网格滚动，并在输入字段中实现流畅的箭头键导航。
问题描述
假设您有一个包含多行的数据网格，每行都有输入字段。用户期望使用箭头键在这些输入字段之间移动光标。然而，MUI数据网格的默认行为会在按下箭头键时滚动整个网格，导致用户难以高效地编辑数据。
解决方案
解决方法是覆盖输入字段获得焦点时的默认键盘事件处理。我们将创建一个可复用的TypeScript实用程序函数来处理此行为，并将其应用于数据网格的onKeyDown事件。
实用程序函数如下：
<code class="typescript">export const handleArrowKeyNavigation = (event: React.KeyboardEvent<HTMLDivElement>): void => {
if (event.target instanceof HTMLInputElement) {
if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
event.stopPropagation();
}
}
};</code>
此函数检查焦点元素是否为输入字段，如果是，则阻止箭头键事件的传播，从而允许用户在输入字段中导航而不会影响数据网格的滚动。
实现实用程序函数
在数据网格组件中实现此实用程序函数：
<code class="typescript">import React from 'react';
import { DataGrid } from '@mui/x-data-grid';
import { useForm, FormProvider, useFieldArray } from 'react-hook-form';
import { handleArrowKeyNavigation } from './utils/handleArrowKeyNavigation';
const CustomDataGrid: React.FC = () => {
const methods = useForm({
defaultValues: {
rows: [
{ id: 1, firstName: 'John', lastName: 'Doe' },
{ id: 2, firstName: 'Jane', lastName: 'Smith' },
{ id: 3, firstName: 'Mike', lastName: 'Johnson' },
],
},
});
const { control, setValue } = methods;
const { fields } = useFieldArray({
control,
name: 'rows',
});
const handleInputChange = (index: number, field: string, value: string) => {
setValue(`rows.${index}.${field}`, value);
};
const columns = [
{
field: 'firstName',
headerName: 'First Name',
width: 150,
editable: true,
renderCell: (params) => (
<input
type="text"
value={params.row.firstName}
onChange={(event) => handleInputChange(params.row.id -1, 'firstName', event.target.value)}
/>
),
},
{
field: 'lastName',
headerName: 'Last Name',
width: 150,
editable: true,
renderCell: (params) => (
<input
type="text"
value={params.row.lastName}
onChange={(event) => handleInputChange(params.row.id -1, 'lastName', event.target.value)}
/>
),
},
];
return (
<div style={{ height: 400, width: '100%' }}>
<DataGrid
onKeyDown={handleArrowKeyNavigation}
columns={columns}
rows={fields}
/>
</div>
);
};
export default CustomDataGrid;</code>
通过将handleArrowKeyNavigation函数添加到数据网格的onKeyDown事件中，我们确保了箭头键事件的正确处理，从而提供无缝的用户体验。
测试实用程序函数
为了确保实用程序函数按预期工作，可以使用Jest和React Testing Library编写单元测试：
<code class="typescript">import { handleArrowKeyNavigation } from './handleArrowKeyNavigation';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
describe('handleArrowKeyNavigation', () => {
it('should stop event propagation of ArrowLeft key', () => {
const stopPropagation = jest.fn();
const event = {
key: 'ArrowLeft',
target: document.createElement('input'),
stopPropagation,
} as unknown as React.KeyboardEvent<HTMLInputElement>;
handleArrowKeyNavigation(event);
expect(stopPropagation).toHaveBeenCalled();
});
it('should stop event propagation of ArrowRight key', () => {
const stopPropagation = jest.fn();
const event = {
key: 'ArrowRight',
target: document.createElement('input'),
stopPropagation,
} as unknown as React.KeyboardEvent<HTMLInputElement>;
handleArrowKeyNavigation(event);
expect(stopPropagation).toHaveBeenCalled();
});
it('should not stop event propagation of other keys', () => {
const stopPropagation = jest.fn();
const event = {
key: 'Enter',
target: document.createElement('input'),
stopPropagation,
} as unknown as React.KeyboardEvent<HTMLInputElement>;
handleArrowKeyNavigation(event);
expect(stopPropagation).not.toHaveBeenCalled();
});
it('should not stop event propagation of non-input elements', () => {
const stopPropagation = jest.fn();
const event = {
key: 'ArrowLeft',
target: document.createElement('div'),
stopPropagation,
} as unknown as React.KeyboardEvent<HTMLDivElement>;
handleArrowKeyNavigation(event);
expect(stopPropagation).not.toHaveBeenCalled();
});
});</code>
这些测试涵盖了各种场景，以确保实用程序函数的正确性。
结论
通过自定义MUI数据网格中输入字段的键盘事件处理，我们可以显著提升用户体验。此解决方案允许用户使用箭头键在输入字段中导航，而不会影响网格的滚动行为。 欢迎尝试此解决方案并在您的项目中使用，并分享您的反馈。
(注意：代码示例已进行修正，使用了更准确的类型和DataGrid组件，并修复了handleInputChange函数中的错误。 renderCell用于渲染单元格内容，而不是renderHeader。 同时，代码更符合React的最佳实践。)
