Как на React очистить поля после отправки формы?

Очистка полей формы после отправки в React

Это одна из самых частых задач в веб-разработке. Существует несколько подходов в зависимости от способа управления состоянием формы.

1. Управление состоянием через useState

Самый базовый способ - хранить значения полей в состоянии и очищать их после отправки.

import { useState } from "react";

export function Form() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    message: ""
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    await fetch("/api/contact", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(formData)
    });
    
    setFormData({
      name: "",
      email: "",
      message: ""
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="name"
        value={formData.name}
        onChange={handleChange}
        placeholder="Имя"
      />
      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
        placeholder="Email"
      />
      <textarea
        name="message"
        value={formData.message}
        onChange={handleChange}
        placeholder="Сообщение"
      />
      <button type="submit">Отправить</button>
    </form>
  );
}

2. Использование useRef для неконтролируемых компонентов

Для простых форм можно использовать useRef и обращаться к DOM напрямую.

import { useRef } from "react";

export function Form() {
  const formRef = useRef(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    const formData = new FormData(formRef.current);
    const data = Object.fromEntries(formData);
    
    await fetch("/api/contact", {
      method: "POST",
      body: formData
    });
    
    formRef.current.reset();
  };

  return (
    <form ref={formRef} onSubmit={handleSubmit}>
      <input type="text" name="name" placeholder="Имя" />
      <input type="email" name="email" placeholder="Email" />
      <textarea name="message" placeholder="Сообщение" />
      <button type="submit">Отправить</button>
    </form>
  );
}

Этот способ очень удобен - reset() очищает все поля автоматически.

3. Использование React Hook Form (рекомендуется)

React Hook Form - популярная библиотека для управления формами с минимальными re-renders.

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

export function Form() {
  const { register, handleSubmit, reset, formState: { errors } } = useForm({
    defaultValues: {
      name: "",
      email: "",
      message: ""
    }
  });

  const onSubmit = async (data) => {
    await fetch("/api/contact", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data)
    });
    
    reset();
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register("name", { required: "Имя обязательно" })}
        placeholder="Имя"
      />
      {errors.name && <span>{errors.name.message}</span>}
      
      <input
        {...register("email", { required: "Email обязателен" })}
        type="email"
        placeholder="Email"
      />
      {errors.email && <span>{errors.email.message}</span>}
      
      <textarea
        {...register("message", { required: "Сообщение обязательно" })}
        placeholder="Сообщение"
      />
      {errors.message && <span>{errors.message.message}</span>}
      
      <button type="submit">Отправить</button>
    </form>
  );
}

Преимущества: встроенная валидация, оптимизированное управление состоянием, удобный API для очистки, меньше re-renders.

4. Очистка с задержкой и обратной связью

Часто нужно показать пользователю успех перед очисткой:

import { useState } from "react";

export function Form() {
  const [formData, setFormData] = useState({ name: "", email: "" });
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsLoading(true);
    
    try {
      const response = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(formData)
      });
      
      if (response.ok) {
        setIsSubmitted(true);
        
        setTimeout(() => {
          setFormData({ name: "", email: "" });
          setIsSubmitted(false);
        }, 2000);
      }
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div>
      {isSubmitted && <p>Форма отправлена успешно!</p>}
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={formData.name}
          onChange={(e) => setFormData({...formData, name: e.target.value})}
          placeholder="Имя"
          disabled={isLoading}
        />
        <input
          type="email"
          value={formData.email}
          onChange={(e) => setFormData({...formData, email: e.target.value})}
          placeholder="Email"
          disabled={isLoading}
        />
        <button type="submit" disabled={isLoading}>
          {isLoading ? "Отправка..." : "Отправить"}
        </button>
      </form>
    </div>
  );
}

5. Очистка определённых полей

Иногда нужно очистить только некоторые поля:

const handlePartialClear = () => {
  setFormData(prev => ({
    ...prev,
    message: ""
  }));
};

Лучшие практики

• Используй React Hook Form для больших форм - оно оптимизировано
• Используй useRef.reset() для простых неконтролируемых форм
• Всегда показывай feedback пользователю (сообщение об успехе)
• Отключай кнопку отправки во время отправки
• Очищай ошибки валидации вместе с полями
• Рассмотри использование onReset для большей гибкости

Выбор метода зависит от сложности формы: для простых форм достаточно useState, для сложных - используй React Hook Form.