React hook 表單在提交時返回空白對象

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/reverent-star-4vtpo