时间戳

首页 > 解决方案 > react-hook-form：注销不清除组件值

reactjs - react-hook-form：注销不清除组件值

问题描述

我有一个文本字段，我正在手动取消注册。它已成功取消注册，并且数据已从 formdata 中排除，但用户输入的值仍保留在文本字段中。我期望值也可以从组件中清除。我什至试过

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>
  );
};

这是我的CSB

我将不胜感激任何帮助

标签： reactjsreact-hooksreact-hook-form

解决方案

发生错误是因为您在 useEffect 应用您的寄存器：

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

相反，如果您申请refat your inputfieldssetValue("person.lastName", "")将按预期清除该字段：

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

推荐阅读