react-hook-form 无法通过单击按钮重置输入来查看更改值

Question

带输入和重置输入按钮的组件TexInputComponent:

<input
    type={type}
    name={name}
    ref={register}
/>
<button
    type="button"
    onClick={clearInput}>
Reset input
</button>

const clearInput = () => {
  document.querySelector(`#${name}`).value = null;
};

我在另一个组件中使用 TexInputComponent 内部表单：

  <TexInputComponent
    name="title"
    defaultValue={data?.title}
    register={register({ required: 'Title is required.' })}
    error={errors.title}
  />

现在，当我在表单 react-hook-form return 上单击提交时，出现错误，例如 'Title is required!'。当我在 TexInputComponent 中写东西时，错误消失了。问题是当我写文本并单击按钮以重置输入时。 clearInput 方法被执行（此方法将 value 更改为 null）现在应该显示错误，但我认为反应挂钩形式看不到值变化。

我该如何解决？

Answer 1

您的 clearInput() 不起作用，因为您没有提供唯一 ID，所以它找不到要重置的输入元素。所以改为：

<input
    id={name} // --> add this line to fix
    type={type}
    name={name}
    ref={register}
/>

然而，还有其他方法可以轻松重置表单，而无需定义您自己的重置方法：

使用 <input type='reset' /> 创建一个重置按钮，重置表单中的所有字段。
使用 useForm 挂钩中的 reset() 函数来重置特定字段：

const { register, reset } = useForm();

return (
  <form onSubmit={handleSubmit(onSubmit)}>
    <label>First name</label>
    <input type="text" name="firstName" ref={register} />

    <label>Last name</label>
    <input type="text" name="lastName" ref={register} />

    <input type="submit" />
    <button
      type="button"
      onClick={() => reset({ firstName: "default name" })}
    >
      Reset first name
    </button>
  </form>
);

react-hook-form 无法通过单击按钮重置输入来查看更改值

react-hook-form can't see change value by click on button to reset input

reactjs

react-hook-form