可编辑表格中的两个列分别是用react-hook-form 和antd的inputNumber实现的,需要在开始时间的列输入后失焦时,或者按enter键,鼠标聚焦到下一列,即结束时间,该如何设置

可编辑表格中的两个列分别是用react-hook-form 和antd的inputNumber实现的,需要在开始时间的列输入后失焦时,或者按enter键,鼠标聚焦到下一列,即结束时间,该如何设置

在React项目中,要实现在一个可编辑表格中,当开始时间列输入后失焦或按下Enter键时,自动将焦点切换至结束时间列,你可以结合使用react-hook-formregister方法与DOM原生的focus方法,以及onBluronKeyDown事件处理函数。以下是一个大致的实现方案:

import React, { useRef } from 'react';
import { InputNumber } from 'antd';
import { useController } from 'react-hook-form';

interface TableRowData {
  startTime: number;
  endTime: number;
  // ...其他字段
}

const EditableCell: React.FC<{ rowData: TableRowData }> = ({ rowData }) => {
  const startTimeRef = useRef<InputNumber>(null);
  const endTimeRef = useRef<InputNumber>(null);

  const { control } = useFormContext();

  // 注册startTime字段
  const { field } = useController({
    name: 'startTime',
    control,
    defaultValue: rowData.startTime,
  });

  // 添加失焦事件处理
  const handleStartTimeBlur = () => {
    if (startTimeRef.current && endTimeRef.current) {
      endTimeRef.current.focus();
    }
  };

  // 添加键盘按下Enter事件处理
  const handleStartTimeKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
    if (event.key === 'Enter') {
      event.preventDefault(); // 阻止表单默认提交行为
      if (endTimeRef.current) {
        endTimeRef.current.focus();
      }
    }
  };

  return (
    <>
      <InputNumber
        ref={startTimeRef}
        {...field}
        onBlur={handleStartTimeBlur}
        onKeyDown={handleStartTimeKeyDown}
        formatter={(value) => `${value.toFixed(2)}`}
        parser={(value) => parseFloat(value.replace(/[^\d.]/g, ''))}
        min={0}
        max={9999.00}
      />
      
      <InputNumber
        ref={endTimeRef}
        {...useController({
          name: 'endTime',
          control,
          defaultValue: rowData.endTime,
        }).field}
        formatter={(value) => `${value.toFixed(2)}`}
        parser={(value) => parseFloat(value.replace(/[^\d.]/g, ''))}
        min={0}
        max={9999.00}
      />
    </>
  );
};

这样当开始时间InputNumber失去焦点或用户按下Enter键时,焦点会自动转移到结束时间的InputNumber上。同时,别忘了在包裹这两个列的外层组件中使用FormProvider来提供react-hook-form的上下文。

posted @ 2024-03-17 22:43  龙陌  阅读(117)  评论(0)    收藏  举报