Формы в React: Создание базовой формы с состоянием и событиями

Введение

В веб-разработке формы необходимы для сбора пользовательского ввода. В React обработка данных форм немного отличается от традиционного HTML. Рекомендуемый подход — использовать технику, называемую "управляемые компоненты" (controlled components).

С управляемыми компонентами данные формы обрабатываются состоянием компонента React. Это делает состояние React "единственным источником истины" (single source of truth), позволяя вам управлять, валидировать и реагировать на пользовательский ввод предсказуемым образом.

В этой лабораторной работе вы создадите простую форму с одним текстовым полем ввода и кнопкой отправки. Вы научитесь:

Создавать элементы формы в JSX.
Использовать хук useState для управления значением поля ввода.
Обрабатывать пользовательский ввод с помощью события onChange.
Обрабатывать отправку формы с помощью события onSubmit.

К концу этой лабораторной работы вы получите прочное понимание основ работы с формами в React.

Создайте элемент ввода с атрибутом onChange

На этом шаге мы начнем с создания базовой структуры нашей формы. Это включает добавление элемента <form> и поля ввода текста (<input>). Мы также добавим атрибут onChange, который имеет решающее значение для отслеживания изменений значения поля ввода.

Сначала подготовим нашу среду разработки. Нам нужно установить зависимости проекта и запустить сервер разработки.

Откройте терминал в WebIDE и выполните следующие команды поочередно. Убедитесь, что вы находитесь в каталоге ~/project/my-app.

cd my-app
npm install

Эта команда устанавливает все необходимые пакеты, определенные в package.json.

Теперь запустите сервер разработки:

npm run dev -- --host 0.0.0.0 --port 8080

Далее перейдите в каталог my-app/src в файловом менеджере слева и откройте файл App.jsx. Мы изменим этот файл, чтобы добавить нашу форму.

Замените содержимое App.jsx следующим кодом. Мы добавляем тег <form> и внутри него элемент <input>. Атрибут onChange добавлен к элементу ввода, который позже будет использоваться для обработки изменений значений.

import "./App.css";

function App() {
  return (
    <form>
      <h1>React Form</h1>
      <label>
        Enter your name:
        <input type="text" onChange={() => {}} />
      </label>
    </form>
  );
}

export default App;

После сохранения файла переключитесь на вкладку Web 8080 в интерфейсе LabEx. Вы должны увидеть простую форму с полем ввода текста. Если изменения не отображаются, попробуйте обновить вкладку. На данном этапе ввод текста в поле ничего не сделает, но у нас есть базовая структура.

Простая форма с текстовым полем ввода и меткой

Обработайте изменение с помощью функции, обновляющей состояние

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

Сначала нам нужно импортировать хук useState из библиотеки 'react'. Затем мы объявим переменную состояния, назовем ее name, для хранения значения поля ввода.

Далее мы создадим функцию под названием handleChange. Эта функция будет вызываться каждый раз, когда пользователь вводит текст в поле ввода. Внутри этой функции мы будем использовать функцию setName, предоставляемую useState, чтобы обновить наше состояние name текущим значением поля ввода, к которому мы можем получить доступ через event.target.value.

Обновите ваш файл App.jsx следующим кодом:

import { useState } from "react";
import "./App.css";

function App() {
  // Создаем переменную состояния 'name' и функцию 'setName' для ее обновления
  const [name, setName] = useState("");

  // Определяем функцию обработчика событий
  const handleChange = (event) => {
    setName(event.target.value);
  };

  return (
    <form>
      <h1>React Form</h1>
      <label>
        Enter your name:
        {/* Связываем обработчик с событием onChange */}
        <input type="text" onChange={handleChange} />
      </label>
    </form>
  );
}

export default App;

Теперь, когда вы вводите текст в поле ввода, вызывается функция handleChange, и состояние name обновляется при каждом нажатии клавиши. Хотя вы пока не видите изменений на экране, состояние компонента теперь отслеживает значение поля ввода. Это первая половина создания управляемого компонента.

Установите атрибут value элемента ввода равным значению состояния

На этом шаге мы завершим паттерн "управляемый компонент" (controlled component). Управляемый компонент — это компонент, значение поля ввода которого определяется состоянием React, что делает состояние "единственным источником истины".

Для достижения этого нам нужно привязать атрибут value элемента <input> напрямую к нашей переменной состояния name. Это создает двустороннюю привязку данных:

Пользователь вводит текст, вызывая onChange, что обновляет состояние.
Обновление состояния вызывает перерисовку (re-render), и значение поля ввода (value) устанавливается в новое значение состояния.

Это гарантирует, что пользовательский интерфейс (UI) всегда синхронизирован с состоянием компонента.

Измените элемент <input> в вашем файле App.jsx, добавив атрибут value следующим образом:

import { useState } from "react";
import "./App.css";

function App() {
  const [name, setName] = useState("");

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

  return (
    <form>
      <h1>React Form</h1>
      <label>
        Enter your name:
        {/* Привязываем значение поля ввода к состоянию */}
        <input type="text" value={name} onChange={handleChange} />
      </label>
    </form>
  );
}

export default App;

После сохранения файла вернитесь на вкладку Web 8080. Форма будет выглядеть так же, но теперь это полностью управляемый компонент. Отображение поля ввода теперь напрямую контролируется переменной состояния name в вашем компоненте React.

Добавьте кнопку отправки с обработчиком onClick

Форма не будет полной без способа ее отправки. На этом шаге мы добавим кнопку отправки и обработчик событий для обработки отправки формы.

Стандартный и наиболее доступный способ обработки отправки форм в React — использование события onSubmit непосредственно на элементе <form>. Это гарантирует, что форму можно будет отправить, нажав кнопку или клавишу "Enter" в поле ввода.

Сначала добавим <button> с type="submit" внутри нашей формы. Затем создадим новый обработчик handleSubmit и привяжем его к атрибуту onSubmit элемента <form>.

Обновите ваш файл App.jsx следующим кодом:

import { useState } from "react";
import "./App.css";

function App() {
  const [name, setName] = useState("");

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

  // Создаем функцию обработчика отправки
  const handleSubmit = (event) => {
    // В следующем шаге мы добавим сюда больше логики
    console.log("Form was submitted");
  };

  return (
    // Привязываем обработчик к событию onSubmit формы
    <form onSubmit={handleSubmit}>
      <h1>React Form</h1>
      <label>
        Enter your name:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      {/* Добавляем кнопку отправки */}
      <button type="submit">Submit</button>
    </form>
  );
}

export default App;

Теперь, если вы перейдете на вкладку Web 8080, вы увидите кнопку "Submit". Если вы нажмете на нее, вы можете заметить, что страница быстро перезагружается. Это стандартное поведение браузера при отправке формы, которое мы рассмотрим в последнем шаге.

Предотвратите стандартное поведение при отправке и выведите данные формы

На этом заключительном шаге мы завершим функциональность формы. Как вы заметили, нажатие кнопки отправки вызывает полную перезагрузку страницы. В одностраничном приложении (SPA), таком как созданное с помощью React, мы хотим обрабатывать отправку форм с помощью JavaScript, не перезагружая страницу.

Для этого нам нужно вызвать event.preventDefault() внутри нашей функции handleSubmit. Объект event автоматически передается обработчику событий, и этот метод останавливает действие браузера по умолчанию.

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

Давайте обновим функцию handleSubmit в App.jsx, чтобы реализовать эту логику.

import { useState } from "react";
import "./App.css";

function App() {
  const [name, setName] = useState("");

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

  const handleSubmit = (event) => {
    // Предотвращаем стандартное поведение отправки формы
    event.preventDefault();
    // Показываем оповещение с введенным именем
    alert(`A name was submitted: ${name}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <h1>React Form</h1>
      <label>
        Enter your name:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default App;

Сохраните файл. Теперь перейдите на вкладку Web 8080, введите имя в поле ввода и нажмите кнопку "Submit". Вы должны увидеть всплывающее окно с введенным вами именем, и страница не будет перезагружаться.

Поздравляем! Вы успешно создали базовую управляемую форму в React.

Резюме

В этой лабораторной работе вы изучили основные принципы работы с формами в React, используя паттерн "управляемые компоненты" (controlled components).

Вы успешно:

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

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

Основы форм в React