Итоги

В этом уроке вы узнали, что:

• Управляемое поле показывает то, что лежит в состоянии, value={name}, а его onChange меняет состояние: onChange={(event) => setName(event.target.value)}. Поэтому страница может показывать набранное прямо во время набора, а setName("") очищает поле.
• Полю с value нужен onChange. Без него React оставляет в поле то, что говорит состояние, поэтому печатать в нём нельзя, и React предупреждает об этом в консоли.
• textarea получает value, как и input. value у select равно value выбранного варианта, и выбирает его состояние.
• Флажок управляется через checked, а его новое состояние — event.target.checked, true или false.
• Значение поля — текст, и у поля с type="number" тоже. Храните в состоянии текст, а Number() применяйте там, где считаете. Пустое поле там равно 0.
• <form onSubmit={handleSubmit}> запускает обработчик, когда форму отправляют кнопкой или клавишей Enter. Вызывайте event.preventDefault() первым, иначе страница загрузится заново, и всё состояние пропадёт.
• Добавление из формы: функция обновления возвращает новый массив с новым элементом, setItems((items) => [...items, { id: Date.now(), text: text }]), а потом поле очищают.
• Обработчик проверяет набранное: сообщение об ошибке лежит в состоянии и записывается перед ранним return. disabled={text.trim() === ""} не даёт нажать кнопку, пока условие равно true.

В следующем уроке, «Мини-проект: Игра-викторина», вы примените состояние, события и условия в собственной игре: вопрос, кнопки с ответами, счёт и финальный экран.

Но сначала немного практики: форма заказа футболки фестиваля. В App.jsx есть форма, но состояния пока нет.