react-hook-form：注銷不清除組件值

Question

我有一個文本字段，我正在手動注銷。 它已成功注銷並且數據已從表單數據中排除，但用戶輸入的值仍保留在文本字段中。 我期待價值也能從組件中清除。 我什至試過

setValue('fieldName',"")

不管用。 不確定我是否做錯了什么。 因此，如果我重新注冊我的文本字段並觸發驗證，您將看到必填字段驗證，但值仍然存在於文本字段中

下面的代碼：

const App = () => {
  const { register, handleSubmit, unregister, errors, setValue } = useForm();

  const onSubmit = (data) => {
    alert(JSON.stringify(data));
  };
  useEffect(() => {
    register("person.firstName", { required: true });
    register("person.lastName", { required: true });
    // }
  }, [register]);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>First Name</label>
      <input
        type="text"
        name="person.firstName"
        onChange={(e) => setValue("person.firstName", e.target.value)}
      />
      {errors?.person?.firstName && <p> First name required</p>}
      <label>Last Name</label>
      <input
        type="text"
        name="person.lastName"
        onChange={(e) => setValue("person.lastName", e.target.value)}
      />
      {errors?.person?.lastName && <p> Last name required</p>}
      <button
        type="button"
        onClick={() => {
          setValue("person.lastName", "");
          unregister("person.lastName");
        }}
      >
        unregister lastName
      </button>
      <input type="submit" />
    </form>
  );
};

這是我的公務員事務局

我將不勝感激任何幫助

Answer 1

發生錯誤是因為您在 useEffect 應用了寄存器：

useEffect(() => {
  register("person.firstName", { required: true });
  register("person.lastName", { required: true });
  // }
}, [register]);

相反，如果您在input字段中申請ref setValue("person.lastName", "")將按預期清除該字段：

<input
  ref={register({ required: true })}
  type="text"
  name="person.firstName"
  onChange={(e) => setValue("person.firstName", e.target.value)}
/>