使用 react-hook-form 在同一页面上添加两个表单答案

【问题标题】：Adding two forms on the same page with react-hook-form使用 react-hook-form 在同一页面上添加两个表单
【发布时间】：2020-12-21 11:04:43
【问题描述】：

我是 REACT-HOOK-FORM 的新手。我创建了一个个人资料页面，我需要在其中创建两个单独的表单。一次用于“更改密码”，另一次用于“配置文件更改”。我正在努力通过 REACT-HOOK-FORM 创建两个单独的表单并利用它来提供验证。

const { handleSubmit, errors, control, reset, setValue } = useForm({
mode: "onSubmit",
reValidateMode: "onChange",
defaultValues: "",
validateCriteriaMode: "all",
submitFocusError: true,
nativeValidation: false,
});

我需要在上面的代码中进行一些编辑吗？请帮忙。

【问题讨论】：

我认为最简单的方法是创建另外两个组件，一个用于更改密码，一个用于更改配置文件。
哦，是的，我完全没有这样想。让我试试，我相信这应该可行，

标签： reactjs react-hook-form multiple-forms

【解决方案1】：

这是正确的答案。看看我是如何解构对象的

    const {
    register,
    handleSubmit,
    watch,
    errors,
    setValue,
    setError,
    control,
    formState: { isSubmitting, isValid },
  } = useForm({
    resolver: yupResolver(schema()),
    mode: "onTouched",
    defaultValues: {},
  });


    const {
    register:register1,
    handleSubmit:handleSubmit1,
    watch:watch1,
    errors:errors1,
    setValue:setValue1,
    setError:setError1,
    control:control1,
  } = useForm({
    resolver: yupResolver(schema1()),
    mode: "onTouched",
    defaultValues: {},
  });

【讨论】：

【解决方案2】：

您需要通过以下方式创建“useForm”的副本

const { handleSubmit, errors, control, reset } = useForm({
  mode: "onSubmit",
  reValidateMode: "onChange",
  defaultValues: "",
  validateCriteriaMode: "all",
  submitFocusError: true,
  nativeValidation: false,
});

const { handleSubmit1, errors1, control1, reset1 } = useForm({
  mode: "onSubmit",
  reValidateMode: "onChange",
  defaultValues: "",
  validateCriteriaMode: "all",
  submitFocusError: true,
  nativeValidation: false,
});

现在基本上你可以在你的渲染函数下创建两个表单，如下所示

<form onSubmit={handleSubmit(onProfileChange)} noValidate autoComplete="off">
{{Reference "error" and "control" variable to validate your form fields}}
</form>

<form onSubmit={handleSubmit(onProfileChange)} noValidate autoComplete="off">
{{Reference "error1" and "control1" variable to validate your form fields}}
</form>

现在您可以在同一个页面上拥有由 REACT-HOOK-FORMS 验证的两个不同的表单，而无需手动处理太多的状态变量。

【讨论】：