TypeScript中react-hook-form的handleSubmit提交后页面刷新无输出求助

问题根源 #

1. 加void的写法：void handleSubmit(onSubmit)会立即执行handleSubmit返回的处理函数，但未传入表单事件对象，且void会将返回值转为undefined，导致表单默认提交行为未被阻止，页面刷新，同时数据收集逻辑未正确触发。
2. 手动加e.preventDefault()的写法：仅调用handleSubmit(onSubmit)只是生成了处理函数，但未执行它，因此onSubmit回调根本不会触发，自然无日志输出。

正确解决方案 #

方案1：直接传递并修正类型匹配

handleSubmit返回的函数符合表单提交事件处理器类型，只需做类型断言消除TypeScript错误即可：

import React from "react";
import { useForm, SubmitHandler } from "react-hook-form";

type FormValues = {
  firstName: string;
  lastName: string;
  email: string;
};

export default function TestForm() {
  const { register, handleSubmit } = useForm<FormValues>();
  const onSubmit: SubmitHandler<FormValues> = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit) as React.FormEventHandler<HTMLFormElement>}>
      <input {...register("firstName")} />
      <input {...register("lastName")} />
      <input type="email" {...register("email")} />

      <input type="submit" />
    </form>
  );
}

方案2：在回调中正确执行处理函数

如果需要自定义额外逻辑，需调用handleSubmit返回的函数并传入事件对象（handleSubmit内部已自动处理e.preventDefault()，无需手动添加）：

<form
  onSubmit={(e) => {
    // 调用handleSubmit生成的处理函数并传入事件
    handleSubmit(onSubmit)(e);
    // 这里可以加其他自定义逻辑
  }}
>

补充说明 #

React Hook Form的handleSubmit设计是接收回调后返回一个表单事件处理函数，这个返回函数会自动阻止表单默认提交行为，并在验证通过后执行你传入的onSubmit回调。之前的错误都是因为没有正确使用这个返回函数的执行逻辑。

内容的提问来源于stack exchange，提问作者David Tran