В HTML елементи форми, такі як < input >, < textarea > і < select >, зазвичай самі керують своїм станом і оновлюють його коли користувач вводить дані. У React змінний стан зазвичай міститься у властивості стану компонентів і оновлюється тільки через виклик setState() Наприклад, після відправлення форми передані дані виводилися у консолі, то ми можемо написати форму як “керований компонент”:
Оскільки ми встановили атрибут value для нашого елементу форми, відображене значення завжди буде this.state.value, що робить стан React “джерелом правди”. Оскільки handleChange працює при кожному натисканні клавіші для оновлення стану React, відображуване значення оновлюватиметься разом із вводом користувача.
Тег textarea
В React < textarea > використовує атрибут value. Форма, яка використовує < textarea >, може бути написана дуже схоже до форми, яка використовує однорядковий ввід:
Зверніть увагу на те, що this.state.value ініціалізується в конструкторі, так що область тексту з самого початку має певний текст.
Тег select
Опція “Кокос” обрана за замовчуванням за допомогою атрибуту selected. Замість того, щоб використовувати атрибут selected,React використовує атрибут value кореневого тегу select. У керованому компоненті так зручніше, тому що потрібно оновити його лише в одному місці. Наприклад:
Загалом, все зроблено таким чином, що < input type="text" >, < textarea > і < select > працюють дуже подібно — всі вони приймають атрибут value, який можна використовувати для реалізації керованого компоненту.
Обробка кількох полів введення даних
Коли вам потрібно обробляти декілька керованих елементів input, ви можете додати атрибут name до кожного елемента і дозволити функції-обробнику вибрати, що робити, спираючись на значення event.target.name.
Крім того, оскільки setState() автоматично об’єднує частковий стан у поточний стан, нам потрібно було лише викликати його зі зміненими частинами.
Значення null керованого поля введення даних
Встановлення значення пропсу value в керованому компоненті не дозволяє користувачеві змінювати введені дані, якщо ви цього не бажаєте. Якщо ви вказали value, але вхідні дані все ще можна редагувати, можливо, ви випадково встановили значення для value як undefined або null. Наступний код це демонструє. (Поле вводу спочатку заблоковане, але стає доступним для редагування після невеликої затримки.)
