3 added
3 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Формы в HTML работают немного не так, как формы в React. Это связано с тем, что в HTML они имеют свое внутреннее состояние - место, в котором хранятся значения форм, тексты, выбранные опции и тому подобное.</p>
1
<p>Формы в HTML работают немного не так, как формы в React. Это связано с тем, что в HTML они имеют свое внутреннее состояние - место, в котором хранятся значения форм, тексты, выбранные опции и тому подобное.</p>
2
<p>Форма выше при каждом изменении поля<em>name</em>изменяет свое внутреннее состояние, которое будет отправлено по нужному адресу при отправке.</p>
2
<p>Форма выше при каждом изменении поля<em>name</em>изменяет свое внутреннее состояние, которое будет отправлено по нужному адресу при отправке.</p>
3
<p>В отличие от прямой работы с DOM (даже через jQuery), в React источником правды является состояние, а не DOM. Формы не являются исключением. Любое изменение в форме, посимвольно, если это ввод, должно быть перенесено в состояние. А элементы форм, чьи данные хранятся в состоянии React, называются управляемыми компонентами (controlled components).</p>
3
<p>В отличие от прямой работы с DOM (даже через jQuery), в React источником правды является состояние, а не DOM. Формы не являются исключением. Любое изменение в форме, посимвольно, если это ввод, должно быть перенесено в состояние. А элементы форм, чьи данные хранятся в состоянии React, называются управляемыми компонентами (controlled components).</p>
4
-
<p><a>https://codepen.io/hexlet/pen/zdVKJy</a></p>
4
+
<p><a>Попрактиковаться</a></p>
5
<p>В коде выше на каждое изменение в элементе<em>input</em>происходит извлечение содержимого через e.target.value и запись его в React. Последующая отправка не нуждается в самой форме, так как все данные уже есть в состоянии. Поэтому при отправке формы достаточно получить нужные данные из объекта-состояния и отправить их, например, на сервер. Обратите внимание: элемент формы становится управляемым (controlled components) только когда происходит подстановка его значения из React: <input value={this.state.text} />.</p>
5
<p>В коде выше на каждое изменение в элементе<em>input</em>происходит извлечение содержимого через e.target.value и запись его в React. Последующая отправка не нуждается в самой форме, так как все данные уже есть в состоянии. Поэтому при отправке формы достаточно получить нужные данные из объекта-состояния и отправить их, например, на сервер. Обратите внимание: элемент формы становится управляемым (controlled components) только когда происходит подстановка его значения из React: <input value={this.state.text} />.</p>
6
<p>Один из множества плюсов управляемых компонентов в том, что становится крайне легко проводить фильтрацию или валидацию. Например, если необходимо вводить данные в верхнем регистре (например, при вводе данных карты), то сделать это можно так:</p>
6
<p>Один из множества плюсов управляемых компонентов в том, что становится крайне легко проводить фильтрацию или валидацию. Например, если необходимо вводить данные в верхнем регистре (например, при вводе данных карты), то сделать это можно так:</p>
7
<p>В противовес управляемым компонентам, React позволяет использовать неуправляемые компоненты (uncontrolled components). При таком подходе состояние формы хранится в самом DOM. Этот способ нужен исключительно для интеграции со сторонними библиотеками или для работы с устаревшим ("легаси") кодом. В нормальной ситуации он не понадобится.</p>
7
<p>В противовес управляемым компонентам, React позволяет использовать неуправляемые компоненты (uncontrolled components). При таком подходе состояние формы хранится в самом DOM. Этот способ нужен исключительно для интеграции со сторонними библиотеками или для работы с устаревшим ("легаси") кодом. В нормальной ситуации он не понадобится.</p>
8
<h2>Текстовая область</h2>
8
<h2>Текстовая область</h2>
9
<p>В HTML значение <textarea> устанавливается как его содержимое:</p>
9
<p>В HTML значение <textarea> устанавливается как его содержимое:</p>
10
<p>В React для этого используется атрибут value:</p>
10
<p>В React для этого используется атрибут value:</p>
11
-
<p><a>https://codepen.io/hexlet/pen/GvbqvP</a></p>
11
+
<p><a>Попрактиковаться</a></p>
12
<p>Стоит отметить, что событие onChange в React работает так, как ожидается, в отличие от onChange в HTML, который срабатывает только когда элемент теряет фокус. Поэтому событие гарантированно происходит на каждое изменение. При этом данные из элемента формы извлекаются обычным способом через e.target.value. Ну а дальше все по старой схеме - данные обновляются в состоянии.</p>
12
<p>Стоит отметить, что событие onChange в React работает так, как ожидается, в отличие от onChange в HTML, который срабатывает только когда элемент теряет фокус. Поэтому событие гарантированно происходит на каждое изменение. При этом данные из элемента формы извлекаются обычным способом через e.target.value. Ну а дальше все по старой схеме - данные обновляются в состоянии.</p>
13
<h2>Выпадающий список</h2>
13
<h2>Выпадающий список</h2>
14
<p>В HTML текущий элемент выбирается с помощью атрибута selected, проставленного на нужном option.</p>
14
<p>В HTML текущий элемент выбирается с помощью атрибута selected, проставленного на нужном option.</p>
15
<p>React предлагает другой способ: необходимо проставить атрибут value компонента select в нужное значение.</p>
15
<p>React предлагает другой способ: необходимо проставить атрибут value компонента select в нужное значение.</p>
16
-
<p><a>https://codepen.io/hexlet/pen/brPgqP</a></p>
16
+
<p><a>Попрактиковаться</a></p>
17
<h2>Чекбокс и радиокнопка</h2>
17
<h2>Чекбокс и радиокнопка</h2>
18
<p>Оба этих типа поддерживают атрибут checked. Если он выставлен, то элемент отмечается выбранным.</p>
18
<p>Оба этих типа поддерживают атрибут checked. Если он выставлен, то элемент отмечается выбранным.</p>
19
<h2>Шаблонный код</h2>
19
<h2>Шаблонный код</h2>
20
<p>Работа с формами в React - довольно трудоемкая задача. С одной стороны, все крайне просто, с другой - появляется много однотипного кода. Поэтому для React создано множество библиотек, позволяющих автоматизировать сохранение состояния формы.</p>
20
<p>Работа с формами в React - довольно трудоемкая задача. С одной стороны, все крайне просто, с другой - появляется много однотипного кода. Поэтому для React создано множество библиотек, позволяющих автоматизировать сохранение состояния формы.</p>