Формы — это сердце любого приложения, где пользователь взаимодействует с интерфейсом: регистрация, логин, отправка комментариев или фильтрация товаров. Но работа с формами в React немного отличается от традиционного подхода в HTML, и сегодня мы разберёмся, как это устроено.

Мы поговорим об управляемых и неуправляемых компонентах, обработке данных форм и создадим полноценную форму регистрации с валидацией.

Навигация по статье

Как работать с формами в React

В React формы управляются состоянием. Это значит, что значения полей (например, текст в инпуте) хранятся в состоянии компонента и обновляются с каждым изменением. Этот подход называется управляемыми компонентами. Также есть другой способ — неуправляемые компоненты, где данные управляются напрямую DOM-элементами. Но обо всём по порядку.

Управляемые компоненты

Управляемые компоненты работают так:

Поле формы получает значение из состояния.
Каждое изменение поля обновляет состояние.

Пример:

function App() {
  const [name, setName] = React.useState('');

  const handleChange = (event) => {
    setName(event.target.value); // Обновляем состояние при каждом вводе
  };

  return (
    <form>
      <label>
        Имя:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      <p>Ваше имя: {name}</p>
    </form>
  );
}

Здесь поле input контролируется состоянием name, а его значение обновляется с помощью обработчика onChange.

Преимущества управляемых компонентов

Полный контроль над данными формы.
Легко интегрировать валидацию и обработку.

Неуправляемые компоненты

Неуправляемые компоненты используют прямой доступ к DOM-узлам через рефы (refs). Значения полей не хранятся в состоянии, а извлекаются напрямую из DOM.

Пример:

function App() {
  const nameInput = React.useRef();

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(`Имя: ${nameInput.current.value}`); // Получаем значение напрямую
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Имя:
        <input type="text" ref={nameInput} />
      </label>
      <button type="submit">Отправить</button>
    </form>
  );
}

Когда использовать:

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

Обработка данных формы

После ввода данных пользователем мы обычно хотим что-то с ними сделать: отправить на сервер, отобразить сообщение или провести валидацию.

Обработчик отправки формы

Используется событие onSubmit:

const handleSubmit = (event) => {
  event.preventDefault(); // Предотвращаем обновление страницы
  console.log('Данные формы отправлены');
};

Событие onChange

Для обновления состояния при изменении значения:

const handleChange = (event) => {
  setValue(event.target.value);
};

Валидация

Проверка данных перед отправкой:

const isValid = value.length > 5; // Например, длина текста больше 5 символов

Практика: форма регистрации с валидацией

Создадим форму регистрации, которая:

Принимает имя, email и пароль.
Проверяет, чтобы пароль был не короче 6 символов.
Отображает сообщение об ошибке, если валидация не пройдена.

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

Начнём с базовой структуры. В App.jsx добавьте следующий код:

import React, { useState } from 'react';

function RegistrationForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();

    // Проверяем длину пароля
    if (password.length < 6) {
      setError('Пароль должен быть не менее 6 символов.');
      return;
    }

    // Очищаем ошибку и отправляем данные
    setError('');
    console.log('Данные формы:', { name, email, password });
    alert('Регистрация успешна!');
  };

  return (
    <form onSubmit={handleSubmit} style={formStyle}>
      <h1>Регистрация</h1>
      <div style={fieldStyle}>
        <label>Имя:</label>
        <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      </div>
      <div style={fieldStyle}>
        <label>Email:</label>
        <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
      </div>
      <div style={fieldStyle}>
        <label>Пароль:</label>
        <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
      </div>
      {error && <p style={errorStyle}>{error}</p>}
      <button type="submit" style={buttonStyle}>Зарегистрироваться</button>
    </form>
  );
}

const formStyle = {
  maxWidth: '400px',
  margin: '50px auto',
  padding: '20px',
  border: '1px solid #ddd',
  borderRadius: '10px',
  backgroundColor: '#f9f9f9',
  fontFamily: 'Arial, sans-serif',
};

const fieldStyle = {
  marginBottom: '15px',
};

const errorStyle = {
  color: 'red',
  marginBottom: '15px',
};

const buttonStyle = {
  padding: '10px 20px',
  backgroundColor: '#4CAF50',
  color: 'white',
  border: 'none',
  borderRadius: '5px',
  cursor: 'pointer',
};

export default function App() {
  return <RegistrationForm />;
}

Шаг 2: Как это работает

Состояние для каждого поля: Мы создаём три состояния для имени, email и пароля. Это управляемые компоненты.
Валидация: Если длина пароля меньше 6 символов, мы устанавливаем сообщение об ошибке в error.
Отправка данных: Если ошибок нет, данные выводятся в консоль, и пользователь видит сообщение об успешной регистрации.
Стили: Добавлены базовые стили, чтобы форма выглядела аккуратно.

Шаг 3: Тестируем

Введите имя и email.
Попробуйте ввести короткий пароль, например «123». Вы увидите сообщение: «Пароль должен быть не менее 6 символов».
Введите правильный пароль, например «123456». Форма отправится, и вы увидите данные в консоли.

Итоги

Сегодня мы разобрались:

Как работать с формами в React, используя управляемые и неуправляемые компоненты.
Обработкой данных формы через события onChange и onSubmit.
Валидацией данных для проверки пользовательского ввода.

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