Как реализовать кнопку Reset Form в компоненте React?

Для реализации кнопки "Reset Form" в компоненте React нужно выполнить несколько шагов. Вот подробное руководство по реализации этой функциональности:

1. Создайте компонент формы:

import React, { useState } from 'react';

const MyForm = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    password: '',
  });

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

  const handleSubmit = (e) => {
    e.preventDefault();
    // Обработка данных формы
  };

  const handleReset = () => {
    setFormData({
      name: '',
      email: '',
      password: '',
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleInputChange}
        />
      </label>
      <label>
        Email:
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleInputChange}
        />
      </label>
      <label>
        Password:
        <input
          type="password"
          name="password"
          value={formData.password}
          onChange={handleInputChange}
        />
      </label>
      <button type="submit">Submit</button>
      <button type="button" onClick={handleReset}>Reset Form</button>
    </form>
  );
};

export default MyForm;

2. В этом компоненте мы используем хук useState для создания состояния formData, которое содержит значения полей формы. Также мы определяем функцию handleInputChange, которая обновляет состояние formData при изменении значения полей формы.

3. Мы также определяем функцию handleSubmit, которая вызывается при отправке формы. В данном случае она просто предотвращает перезагрузку страницы (поведение по умолчанию). В вашем случае вы можете добавить свою логику для отправки данных на сервер или выполнения других действий.

4. Функция handleReset сбрасывает значения полей формы, устанавливая их в исходные значения. В данном случае мы вручную устанавливаем значения полей в пустую строку, но вы можете установить их в любые другие значения по вашему усмотрению.

5. И наконец, мы возвращаем JSX, который представляет форму. У каждого поля формы есть атрибут value, который привязан к соответствующему значению в состоянии formData, и атрибут onChange, который привязан к функции handleInputChange, чтобы обновлять состояние formData при изменении полей формы.

6. Мы также добавляем кнопку "Reset Form", которая вызывает функцию handleReset по клику.

Теперь, когда вы включаете этот компонент в вашу приложение React, у вас будет поле формы, которое можно сбросить нажатием кнопки "Reset Form".