Глава 12. Формы и контролируемые поля
Зачем эта глава
Формы — частая часть любого заказа: логин, регистрация, заявки. Нужно уметь работать с вводом.
Теория (коротко)
Контролируемая форма — это когда значение поля хранится в state.
Так React всегда «знает», что находится в поле ввода.
function NameForm() {
const [name, setName] = useState("");
return (
<input
value={name}
onChange={(e) => setName(e.target.value)}
/>
);
}
Подсказка: при работе с несколькими полями удобно хранить объект состояния.
Задания
Задание: форма регистрации
- Добавь поля «Имя» и «Email».
- Сохраняй значения в state.
- Покажи введённые значения под формой.
Практика для фриланса
Клиенты часто просят «простую форму». Уточняй: сколько полей, нужна ли валидация и что происходит после отправки.
Проверка себя
Ты умеешь создавать контролируемые поля и хранить данные формы.
Мини-проект
Цель: форма обратной связи.
Требования: имя, сообщение, кнопка отправки.
Критерий готовности: данные сохраняются и выводятся после отправки.
Словарь главы
- Контролируемая форма
- Форма, где значения полей хранятся в state.
- onChange
- Событие, которое реагирует на ввод.