Глава 11. События: клики, ввод и обработчики
Зачем эта глава
Пользователь взаимодействует с интерфейсом через клики, ввод, наведение. React позволяет ловить эти события и реагировать.
Теория (коротко)
События в React похожи на обычный JavaScript, но передаются через props, например onClick.
В обработчик можно передать функцию, которая меняет state.
function LikeButton() {
const [likes, setLikes] = useState(0);
return (
<button onClick={() => setLikes(likes + 1)}>
Лайков: {likes}
</button>
);
}
Важно: нельзя вызывать функцию сразу, нужно передавать её как ссылку: onClick={handleClick}.
Задания
Задание: обработчики
- Сделай кнопку, которая показывает alert.
- Добавь обработчик двойного клика.
- Сделай счётчик кликов.
Проверка себя
Ты умеешь обрабатывать клики и события ввода.
Мини-проект
Цель: кнопки «Лайк» и «Дизлайк».
Требования: два счётчика и кнопки увеличения.
Критерий готовности: счётчики работают независимо.
Словарь главы
- Событие
- Действие пользователя: клик, ввод, наведение.
- Обработчик
- Функция, которая реагирует на событие.