Создание формы с несколькими полями ввода в React.js

Шаг 1: Создание компонента формы

Создадим компонент формы с использованием хука useState, который позволяет нам отслеживать и обновлять состояние компонента.

import React, { useState } from 'react';

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

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

  const handleSubmit = (e) => {
    e.preventDefault();
    // Действия при отправке формы
    console.log('Отправленная форма:', formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Имя:
        <input type="text" name="firstName" value={formData.firstName} onChange={handleChange} />
      </label>
      <br />
      <label>
        Фамилия:
        <input type="text" name="lastName" value={formData.lastName} onChange={handleChange} />
      </label>
      <br />
      <label>
        Email:
        <input type="text" name="email" value={formData.email} onChange={handleChange} />
      </label>
      <br />
      <button type="submit">Отправить</button>
    </form>
  );
};

export default MyForm;

В этом компоненте мы используем useState для отслеживания состояния формы и обновления его при изменении значений полей ввода с помощью обработчика handleChange.

Шаг 2: Использование компонента в приложении

Используем наш компонент формы в приложении:

import React from 'react';
import MyForm from './MyForm';

const App = () => {
  return (
    <div>
      <h1>Моя форма</h1>
      <MyForm />
    </div>
  );
};

export default App;

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

Создание управляемых компонентов в React обеспечивает более чистый и предсказуемый подход к обработке форм, делая код более читаемым и легко поддерживаемым.

Комментарии

Коментарии отсутствуют, будьте первым(ой) кто напишет под этим постом!

Написать коментарий