反应挂钩形式没有获得嵌套组件的上下文

Question

我有多个选项卡，每个选项卡加载不同的组件。在每个组件中，我都有不同的表单集。所以有一个通用页脚，用户可以在其中单击保存或继续。

所以我尝试使用 react hook 形式的 useContext，但我没有得到值。

我在下面的代码中重现了同样的问题。

保存并继续组件

import React from "react";
import { useFormContext } from "react-hook-form";

const Footer = (props) => {
  const { formState, handleSubmit } = useFormContext();

  const onSaveDetails = (data) => {
    console.log("onSaveDetails", data);
  };

  const onContinue = (data) => {
    console.log("onContinue", data);
  };
  return (
    <>
      <button
        disabled={!formState?.isDirty}
        onClick={handleSubmit(onSaveDetails)}
      >
        Save
      </button>
      <button disabled={!formState?.isDirty} onClick={handleSubmit(onContinue)}>
        Continue
      </button>
    </>
  );
};

export default Footer;

如何使用反应挂钩表单上下文单击保存或继续按钮时获取每个组件表单的表单数据

感谢任何帮助

这是codesandbox

Answer 1

我看了你的codesandbox。问题是：

在你的 ServiceDetails 和 UserDetails 组件上你应该 register 你的输入使用 useFormContext 而不是 useForm:

const { register } = useFormContext({
    mode: "onBlur",
    reValidateMode: "onChange",
    defaultValues: {
      firstName: ""
    }
  });

反应挂钩形式没有获得嵌套组件的上下文

react hook form not getting context on nested component

reactjs

react-hook-form