可编辑表格中的两个列分别是用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
的上下文。