使用React Hook Form清除表单

在React Hook Form中，我们可以使用reset方法来重置整个表单。这个方法可以将所有已输入的数据清除，并将所有表单项的错误消息清除。

useForm钩子

我们可以使用useForm钩子来创建一个表单的实例，然后我们可以使用reset方法来重置表单。

import { useForm } from "react-hook-form";

function App() {
  const { register, handleSubmit, errors, reset } = useForm();

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="text" name="firstName" ref={register} />
      <input type="text" name="lastName" ref={register} />
      {errors.firstName && <p>{errors.firstName.message}</p>}
      {errors.lastName && <p>{errors.lastName.message}</p>}
      <button type="submit">Submit</button>
      <button type="button" onClick={() => reset()}>
        Clear
      </button>
    </form>
  );
}

在上面的代码中，我们在表单中添加了一个清除按钮，并在按钮点击时调用了reset方法。

输入重置的默认值

如果您希望在重置表单时设置默认值，可以将您输入的默认值作为参数传递给reset方法。

例如，我们想在重置表单时将firstName的默认值设置为John：

<button type="button" onClick={() => reset({ firstName: "John" })}>
  Clear
</button>

这将在清除表单时将firstName设置为John。

重置整个表单

如果您需要重置整个表单，包括它所有的值和验证错误，您可以使用reset方法的第二个可选参数。将此参数设置为undefined将清除所有内容。

例如，我们将以下代码添加到我们的例子中：

<button type="button" onClick={() => reset(undefined, { errors: true })}>
  Clear All
</button>

当点击“Clear All”按钮时，表单将被重置，并且所有的验证错误都将被清除。

结论

在React Hook Form中，使用reset方法可以清除输入的值并清除所有验证错误。通过在调用reset方法时传递默认值的对象，我们可以设置输入的默认值。还可以使用reset方法的第二个参数来清除所有验证错误。