事件的实用使用React React MUI数据网格：允许输入字段的箭头密钥导航

export const handleArrowKeyNavigation = (event: React.KeyboardEvent<HTMLDivElement>): void => {
  if (event.target instanceof HTMLInputElement) {
    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
      event.stopPropagation();
    }
  }
};

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;

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();
  });
});