首页 > 解决方案 > 仅在选中复选框时复制表单输入 - React Hook Form

问题描述

我试图有两种形式,其中第二种形式在检查复选框时复制了第一个形式的输入。

我从 React Hook 表单库中遇到了这段代码,但是,即使未选中该复选框,第二个表单仍会复制第一个表单的输入。

我一直在尝试修复它,但找不到代码有什么问题。

这里是 CSB:https ://codesandbox.io/s/cool-dew-1pvsw?file=/src/Contact.tsx

复制表单输入

标签: reactjstypescriptformsreact-hook-form

解决方案


您在复制复选框值时犯了错误。这是代码更新。

const Contact = ({
  email,
  email2,
  checked,
  setChecked
}: {
  email: string;
  email2: string;
  checked: boolean;
  setChecked: (checked: boolean) => void;
}) => {
  const { handleSubmit, register, setValue, watch } = useForm({
    defaultValues: { email: email, email2: email2, checky: checked // 1- Add checkbox to form }
  });
  const onSubmit = (values) => console.log(values);
  const watchEmail = watch("email", email);
  const checkbox = watch("checky", checked); // const checkbox = watch("checkbox", email); you're assiging wrong value to checkbox
......

推荐阅读