React Hook Form向子组件传handleSubmit后提交失效的解决方法

问题原因 #

你当前的写法中，handleSubmit是在父组件上下文里生成的，但表单<form>位于子组件中，两者的表单上下文不匹配，导致提交时无法正确触发onSubmit回调。

解决方案1：传递完整表单实例 #

将useForm返回的完整表单实例传给子组件，保证子组件使用的表单上下文和父组件一致：

function Parent() {
  const form = useForm();
  const { handleSubmit } = form;

  const onSubmit = (data) => {
    console.log(data);
  };

  return <Child form={form} submit={handleSubmit(onSubmit)} />
}

function Child({ form, submit }) {
  const { register } = form;
  
  return (
    <form onSubmit={submit}>
      <input defaultValue="test" {...register("example")} />
      <input type="submit" />
    </form>
  );
}

解决方案2：使用FormProvider（官方推荐） #

借助React Hook Form的FormProvider和useFormContext实现跨组件的表单状态共享，这是更规范的跨组件表单处理方式：

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

function Parent() {
  const formMethods = useForm();
  const { handleSubmit } = formMethods;

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <FormProvider {...formMethods}>
      <Child submit={handleSubmit(onSubmit)} />
    </FormProvider>
  );
}

function Child({ submit }) {
  const { register } = useFormContext();
  
  return (
    <form onSubmit={submit}>
      <input defaultValue="test" {...register("example")} />
      <input type="submit" />
    </form>
  );
}

补充说明 #

handleSubmit内部会关联当前上下文的表单DOM节点和状态，当你在父组件生成该函数时，它并没有绑定到子组件的<form>元素上，所以点击提交无法触发回调。而把<form>放在父组件时，两者处于同一上下文，因此能正常工作。

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