React Формы

Так же, как и в HTML, React использует формы для взаимодействия пользователей с веб-страницей.

Добавление форм в React

Формы в React добавляются точно так же, как и другие элементы:

function MyForm() {
  return (
    <form>
      <label>Введите ваше имя:
        <input type="text" />
      </label>
    </form>
  )
}

createRoot(document.getElementById('root')).render(
  <MyForm />
);

Эта форма будет работать обычным образом: при отправке формы произойдёт обычная операция, а страница обновится.

Но в большинстве случаев такое поведение нежелательно в React. Нам нужно предотвратить такую стандартную обработку и позволить React самому управлять формой.

Формы HTML vs. формы React

В React элементы форм, такие как <input>, <textarea> и <select>, ведут себя немного иначе, чем традиционные HTML-элементы.

В обычной HTML форме элементы сами отслеживают своё значение, основанное на действиях пользователя.

Например, текстовое поле <input type="text"> само следит за своим значением в DOM.

В React же значение элемента формы сохраняется в свойстве состояния компонента state и изменяется только через функцию setState().

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

Контролируемые компоненты

В контролируемом компоненте управление данными формы берёт на себя компонент React.

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

Когда данные находятся под контролем компонентов, вся информация хранится в состоянии компонента.

Мы можем использовать хук useState, чтобы следить за каждым значением ввода и обеспечивать единое централизованное хранилище данных для всего приложения.

import { useState } from 'react';
import { createRoot } from 'react-dom/client';

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

  function handleChange(e) {
    setName(e.target.value);
  }

  return (
    <form>
      <label>Введите ваше имя:
        <input
          type="text" 
          value={name}
          onChange={handleChange}
        />
      </label>
      <p>Текущее значение: {name}</p>
    </form>
  )
}

createRoot(document.getElementById('root')).render(
  <MyForm />
);

Пояснение к примеру:

1. Импортируем хук useState из React:

   
   import { useState } from 'react';
   
   

2. Создаем переменную состояния для хранения значения поля ввода и функцию для её обновления:

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

3. Создаем функцию для обработки события изменения:

   
   function handleChange(e) {
     setName(e.target.value);
   }
   
   

4. Присваиваем полю ввода значение из переменной состояния и атрибуту onChange обработчик события изменения:

   
   <input
     type="text" 
     value={name}
     onChange={handleChange}
   />
   
   

5. Выводим текущее значение, чтобы продемонстрировать, что значение действительно обновляется:

   
   <p>Текущее значение: {name}</p>
   
   

Начальные значения

Чтобы добавить начальное значение в поле ввода в приведённом выше примере, укажите начальное значение в объекте useState:

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

  ...