React 钩子表单在提交时返回空白对象

Question

这是我的简化问题：

https://codesandbox.io/s/busy-fire-mm91r?file=/src/FormWrapper.tsx

代码：

export const FormItemWrapper = ({ children }) => {
  return <FormItem>{children}</FormItem>;
};

export const FormWrapper = ({ children }) => {
  const { handleSubmit } = useForm();
  const onSubmit = (data) => {
    console.log(data); // logs { }
  };
  return <Form onFinish={handleSubmit(onSubmit)}>{children}</Form>;
};

export default function App() {
  const { control, watch } = useForm();
  console.log(watch()); // logs { }
  return (
    <FormWrapper>
      <FormItemWrapper>
        <Controller
          control={control}
          name="tmp"
          render={({ field }) => <Input {...field} />}
        />
      </FormItemWrapper>
      <FormItemWrapper>
        <Button htmlType="submit">Save</Button>
      </FormItemWrapper>
    </FormWrapper>
  );
}

问题：

React-hook-form 似乎看不到我输入的数据。我可以使用 antd 获取它，但不能使用 react-hook-form。为什么？我错过了什么？

watch() 只记录一次，它记录 { }。 onSubmit 日志 { }

Answer 1

您使用 useForm 调用创建了两个不同的表单实例。如果你想在 Controller 中获取当前的表单上下文，你应该使用 useFormContext 并将你的表单包装在 FormProvider 中。

工作示例：

https://codesandbox.io/s/admiring-lehmann-mgd0i?file=/src/App.tsx

React 钩子表单在提交时返回空白对象

React hook form returning blank object on submit

javascript

reactjs

antd

react-hook-form