Глобальные обработчики через useEffect в React
Предположим, что теперь мы хотим, чтобы
цвет у нас менялся не только по клику
на кнопку, но и по нажатию Enter
на клавиатуре. В обычной React жизни
прослушивать глобальный объект window
использовав
addEventListener
нельзя. Для этого у нас есть эффекты. Давайте
добавим это действие с помощью useEffect.
Напишем функцию обработчика
по клику на Enter. Пусть цвет
в этом случае меняется на красный:
function handleEnter(event) {
if (event.keyCode === 13) {
setColor('red');
}
}
Привяжем теперь прослушивание событий
к window в хуке useEffect:
useEffect(() => {
document.body.style.color = color;
window.addEventListener('keydown', handleEnter);
}, [color]);
Если у нас есть какая-то установочная
функция, то нам всегда нужно в useEffect
возвращать код очистки или отписки, чтобы
избежать проблем в дальнейшем. В данном
случае нам нужно после прикрепления
addEventListener вернуть его
удаление:
useEffect(() => {
document.body.style.color = color;
window.addEventListener('keydown', handleEnter);
return () => {
window.removeEventListener('keydown', handleEnter);
};
}, [color]);
Дан компонент. Сделайте так, чтобы по клику на любое место страницы фон этого компонента менял цвет.
Сделайте ссылку, по нажатию на которую будет появляться блок. Сделайте так, чтобы по нажатию в любое место окна браузера наш блок скрывался.