如何在定时器到期时编程式提交react-hook-form表单？

你可以通过以下两种方式定义onExpire属性来实现需求：

方法一：调用表单元素的原生submit方法 #

直接通过ref获取表单DOM元素，调用其原生submit()方法，这和用户点击提交按钮的行为完全一致，会触发handleSubmit(onSubmit)的完整逻辑（包括表单验证等）：

const time = new Date();
time.setSeconds(time.getSeconds() + 2);

// 正确初始化ref，初始值设为null
const submitRef = useRef(null);

const {
  seconds,
  minutes,
  hours,
  days,
  isRunning,
  start,
  pause,
  resume,
  restart,
} = useTimer({ 
  time, 
  onExpire: () => {
    // 先检查ref是否关联到表单元素，避免报错
    if (submitRef.current) {
      submitRef.current.submit();
    }
  } 
});

方法二：直接调用react-hook-form的处理函数 #

如果你不想操作DOM，也可以直接调用handleSubmit包裹后的提交函数，结合getValues获取表单数据：

首先确保已初始化react-hook-form的核心钩子：

const { register, handleSubmit, getValues } = useForm();

然后修改onExpire逻辑：

onExpire: () => {
  // 获取当前表单所有字段的值
  const formData = getValues();
  // 直接调用处理后的提交函数
  handleSubmit(onSubmit)(formData);
}

注意事项 #

• 第一种方法更贴近用户手动提交的场景，会自动触发你设置的表单验证规则；
• 第二种方法跳过了原生表单的提交流程，适合不需要原生验证的场景；
• 务必保证submitRef正确绑定到<form>元素，初始化时必须设为useRef(null)，避免出现current为undefined的报错。

内容的提问来源于stack exchange，提问作者Sadegh Eskandari