7. Формы в React

React: Формы - Движок вашего взаимодействия

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

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

В React существуют два основных подхода к работе с формами: управляемые и неуправляемые компоненты. Мы сосредоточимся на управляемых компонентах, поскольку они предлагают большую гибкость и контроль.

Управляемый компонент: Значение элемента формы контролируется состоянием React-компонента. При изменении значения формы, состояние компонента обновляется, что, в свою очередь, обновляет значение элемента формы.

Пример:

import React, { useState } from 'react';

function MyForm() {
  const [inputValue, setInputValue] = useState('');

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

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Введенное значение: ${inputValue}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Введите текст:
        <input
          type="text"
          value={inputValue}
          onChange={handleChange}
        />
      </label>
      <button type="submit">Отправить</button>
    </form>
  );
}

export default MyForm;

В этом примере:

inputValue – состояние компонента, хранящее значение текстового поля.
handleChange – функция, обновляющая состояние inputValue при изменении значения в поле ввода.
value={inputValue} – привязывает значение поля ввода к состоянию inputValue.
onSubmit - обрабатывает отправку формы, предотвращая перезагрузку страницы и выводя значение.

Работа с разными типами полей

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

Чекбокс:

import React, { useState } from 'react';

function MyCheckboxForm() {
  const [isChecked, setIsChecked] = useState(false);

  const handleCheckboxChange = (event) => {
    setIsChecked(event.target.checked);
  };

  return (
    <label>
      <input
        type="checkbox"
        checked={isChecked}
        onChange={handleCheckboxChange}
      />
      Согласен с условиями
    </label>
  );
}

export default MyCheckboxForm;

Здесь мы используем event.target.checked для получения состояния чекбокса.

Жизненный пример

Формы используются повсеместно:

Регистрация и авторизация: Ввод имени пользователя, пароля, email.
Поиск: Ввод поискового запроса.
Онлайн-магазины: Заполнение адреса доставки, выбор способа оплаты.
Редакторы контента (CMS): Редактирование статей, новостей, описаний товаров.
Фреймворки: Многие UI фреймворки, например, Material UI или Ant Design, предоставляют готовые компоненты форм с валидацией и стилизацией.

Практически любой веб-сайт или приложение, где требуется взаимодействие с пользователем, использует формы.

Ключевые моменты

Управляемые компоненты: Состояние формы управляется React.
Обработчики событий: onChange и onSubmit используются для обработки изменений и отправки формы.
Состояние: Используйте useState хук для управления состоянием полей формы.
Разные типы полей: Подстраивайте обработчики событий под конкретный тип поля формы.
Предотвращение перезагрузки страницы: Используйте event.preventDefault() в обработчике onSubmit.