Как очистить форму в React Hook Form: методы и примеры

Чтобы очистить форму в React Hook Form, вы можете использовать один из следующих методов:

  1. Сброс всей формы.
    Вы можете использовать метод reset, предоставляемый React Hook Form, чтобы сбросить поля формы до их первоначальных значений. Этот метод также устранит любые ошибки проверки. Вот пример:

    import { useForm } from 'react-hook-form';
    function MyForm() {
     const { register, handleSubmit, reset } = useForm();
     const onSubmit = (data) => {
       // Handle form submission
     };
     const handleReset = () => {
       reset(); // Reset the form
     };
     return (
       <form onSubmit={handleSubmit(onSubmit)}>
         {/* Form fields */}
         <button type="submit">Submit</button>
         <button type="button" onClick={handleReset}>Reset</button>
       </form>
     );
    }
  2. Сброс отдельных полей формы.
    Если вы хотите очистить определенные поля формы по отдельности, вы можете использовать метод setValue, предоставляемый формой React Hook. Вот пример:

    import { useForm } from 'react-hook-form';
    function MyForm() {
     const { register, handleSubmit, setValue } = useForm();
     const onSubmit = (data) => {
       // Handle form submission
     };
     const handleResetField = () => {
       setValue('fieldName', ''); // Reset the specific field
     };
     return (
       <form onSubmit={handleSubmit(onSubmit)}>
         {/* Form fields */}
         <button type="submit">Submit</button>
         <button type="button" onClick={handleResetField}>Reset Field</button>
       </form>
     );
    }