React-Hook-Form中onSubmit函数无法执行，验证正常无报错求解决

你的代码里存在一个关键的类型导入缺失问题，这大概率是导致onSubmit无法触发的原因：

1. 缺失SubmitHandler类型导入 #

你在定义onSubmit时使用了SubmitHandler<Props>类型，但未从react-hook-form中导入该类型。TypeScript在类型不匹配的情况下，可能会导致handleSubmit无法正确绑定你的提交函数。

修复方法：在react-hook-form的导入语句中添加SubmitHandler：

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

2. 其他可能的排查点 #

如果导入类型后问题仍存在，可以检查以下内容：

• 确认react-hook-form与@hookform/resolvers/yup的版本兼容性，避免版本不匹配引发隐性问题
• 查看浏览器控制台是否有未捕获的TypeScript类型错误（部分情况下编译通过但运行时存在类型相关隐性问题）
• 移除表单上的ref={form}，React Hook Form不需要手动给表单绑定ref来处理提交逻辑，多余的ref可能干扰内部处理

修复后的完整代码示例 #

import React from "react";
import { useForm, SubmitHandler } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import { string, object, InferType } from "yup";

const schema = object({
  firstName: string().required("First name is required"),
});

type Props = InferType<typeof schema>;

function FormEmail() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<Props>({
    resolver: yupResolver(schema),
  });

  const onSubmit: SubmitHandler<Props> = (data) => console.log("testing", data);

  return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)}>
        <h3>First Name</h3>
        <input
          id="firstName"
          type="text"
          {...register("firstName")}
        />
        <span className="error">{errors?.firstName?.message}</span>

        <button type="submit">
          Submit
        </button>
      </form>
    </div>
  );
}

export default FormEmail;

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