如何在 React-hook-form 中提交后重置整个表单

Question

提交表单到reset/clear字段值后我应该做什么？

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

export default function App() {
  const { register, handleSubmit } = useForm();
  const onSubmit = data => console.log(data);
   
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName", { required: true, maxLength: 20 })} />
      <input {...register("lastName", { pattern: /^[A-Za-z]+$/i })} />
      <input type="number" {...register("age", { min: 18, max: 99 })} />
      <input type="submit" />
    </form>
  );
}`

Answer 1

您可以从 useForm 挂钩中获取重置函数，并在您的 onSubmit 函数中调用它，如下所示：

    import React from "react";
    import { useForm } from "react-hook-form";
    
    export default function App() {
      const { register, handleSubmit, reset } = useForm();
      const onSubmit = data => {
           console.log(data)
           reset()
      }
       
      return (
        <form onSubmit={handleSubmit(onSubmit)}>
          <input {...register("firstName", { required: true, maxLength: 20 })} />
          <input {...register("lastName", { pattern: /^[A-Za-z]+$/i })} />
          <input type="number" {...register("age", { min: 18, max: 99 })} />
          <input type="submit" />
        </form>
      );
    }`

在 reset documentation，您可以查看一些重置表单的良好做法，例如为输入提供一些默认值。

如何在 React-hook-form 中提交后重置整个表单

How to reset the whole form after submitting in React-hook-form

reactjs

forms

react-hooks

react-hook-form

react-forms