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

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

  1. Управляемые компоненты. В этом подходе вы сохраняете значения полей ввода в состоянии компонента и обновляете состояние при отправке формы. После отправки формы вы можете сбросить состояние, чтобы очистить поля ввода.

  2. Ссылки: вы можете создать ссылку для каждого поля ввода и использовать ее для доступа и очистки значения поля после отправки формы.

  3. Сброс формы. Оберните поля ввода в элемент

    и используйте метод reset()формы, чтобы очистить все поля ввода..

Вот пример, демонстрирующий подход с использованием контролируемых компонентов:

import React, { useState } from "react";
function MyForm() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    // Add more fields as needed
  });
  const handleChange = (e) => {
    setFormData((prevData) => ({
      ...prevData,
      [e.target.name]: e.target.value,
    }));
  };
  const handleSubmit = (e) => {
    e.preventDefault();
    // Perform form submission logic here
    // Clear the input fields
    setFormData({
      name: "",
      email: "",
      // Reset other fields as needed
    });
  };
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="name"
        value={formData.name}
        onChange={handleChange}
        placeholder="Name"
      />
      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
        placeholder="Email"
      />
      {/* Add more input fields here */}
      <button type="submit">Submit</button>
    </form>
  );
}