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

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

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的上下文。

__EOF__

本文作者：龙陌
本文链接：https://www.cnblogs.com/longmo666/p/18079374.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！