Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос нашим менторам. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Формы

Формы в HTML работают немного не так, как формы в React. Это связано с тем, что в HTML они имеют своё внутреннее состояние - место, в котором хранятся значения форм, тексты, выбранные опции и тому подобное.

<form action="">
  <label>
    Name:
    <input type="text" name="name" />
  </label>
  <input type="submit" value="Submit" />
</form>

Форма выше при каждом изменении поля name изменяет своё внутреннее состояние, которое будет отправлено по нужному адресу при отправке.

В отличие от прямой работы с DOM (даже через jQuery), в React источником правды является состояние, а не DOM. Формы не являются исключением. Любое изменение в форме, посимвольно, если это ввод, должно быть перенесено в состояние. А элементы форм, чьи данные хранятся в состоянии React, называются управляемые компоненты (controlled components).

See the Pen js_react_forms_input by Hexlet (@hexlet) on CodePen.

В коде выше на каждое изменение в элементе input происходит извлечение содержимого через e.target.value и запись его в React. Последующая отправка не нуждается в самой форме, так как все данные уже есть в состоянии. Поэтому при отправке формы достаточно получить нужные данные из объекта-состояния и отправить их, например, на сервер. Обратите внимание: наш элемент формы становится управляемым (controlled components) только когда происходит подстановка его значения из React: <input value={this.state.text} />.

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

handleChange = (e) => {
  this.setState({ value: e.target.value.toUpperCase() });
}

В противовес управляемым компонентам, React позволяет использовать неуправляемые компоненты (uncontrolled components). При таком подходе состояние формы хранится в самом DOM. Этот способ нужен исключительно для интеграции со сторонними библиотеками или для работы с устаревшим ("легаси") кодом. В нормальной ситуации он не понадобится.

Текстовая область

В HTML значение <textarea> устанавливается как его содержимое:

<textarea>
  Like this
</textarea>

В React для этого используется атрибут value:

See the Pen js_react_forms by Hexlet (@hexlet) on CodePen.

Стоит отметить, что событие onChange в React работает так, как ожидается, в отличие от onChange в HTML, который срабатывает только когда элемент теряет фокус. Поэтому мы гарантировано получаем срабатывание события на каждое изменение. При этом данные из элемента формы извлекаются обычным способом через e.target.value. Ну а дальше всё по старой схеме — данные обновляются в состоянии.

Выпадающий список

В HTML текущий элемент выбирается с помощью атрибута selected, проставленного на нужном option.

<select>
  <option value="grapefruit">Grapefruit</option>
  <option value="lime">Lime</option>
  <option selected value="coconut">Coconut</option>
  <option value="mango">Mango</option>
</select>

React предлагает другой, более простой и удобный способ. Достаточно проставить атрибут value компонента select в нужное значение.

See the Pen js_react_forms_select by Hexlet (@hexlet) on CodePen.

Чекбокс и радиокнопка

Оба этих типа поддерживают атрибут checked. Если он выставлен, то элемент отмечается выбранным.

<input name="isGoing" type="checkbox" checked={this.state.isGoing} onChange={this.handleInputChange} />

Шаблонный код

Работа с формами в React — довольно трудоёмкая задача. С одной стороны всё крайне просто, с другой — появляется много однотипного кода. Поэтому для React создано множество библиотек, позволяющих автоматизировать сохранение состояния формы. В основном эти библиотеки нацелены на работу через Redux. Подробнее — в соответствующем курсе.


Дополнительные материалы

  1. Формы

<span class="translation_missing" title="translation missing: ru.web.courses.lessons.mentors.mentor_avatars">Mentor Avatars</span>

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят менторы из команды Хекслета или другие студенты.

Для полного доступа к курсу нужна профессиональная подписка

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

Получить доступ
115
курсов
892
упражнения
2241
час теории
3196
тестов

Зарегистрироваться

или войти в аккаунт

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 115 курсов, 2000+ часов теории
  • 800 практических заданий в браузере
  • 250 000 студентов

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Rambler
Логотип компании Bookmate
Логотип компании Botmother

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».