如何在 react-hook-form 版本 7 中重置 setValues？

Question

我已经从 api 中形成了一些预填充的值，我将它们设置为 setValues('input-field-name','value-got-from-api') 当我使用 react-hook-form 的重置方法时，它会重置新添加的数据，但不会重置字段中的整个数据。例如。如果先前带有 setValue 的输入字段值是 123 并且如果我键入 123abc 它会重置 abc 部分并将字段设置为 12345。但我想重置为 null 或空白表单。

直接的问题是，如何通过使用普通 js 或使用 react-hook-form 重置表单字段？

PS：我尝试了 rect-hook-form 中的 reset() 方法和普通 js 重置 document.getElementById('myform').reset(); 但注意到有效。

Answer 1

您可以使用从useForm 钩子返回的reset 方法。

export default function App() {
  const { register, handleSubmit, reset } = useForm();
  const onSubmit = (data, e) => {};

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName", { required: true })} />
      <input {...register("lastName")} />
      <input type="button" onClick={() => {
        reset({
          firstName: "default value",
        }, {
          keepErrors: true, 
          keepDirty: true,
          keepIsSubmitted: false,
          keepTouched: false,
          keepIsValid: false,
          keepSubmitCount: false,
        });
      }} />
    </form>
  );
}