Глобални обработчици чрез 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]);

Даден е компонент. Направете така, че при кликване във всяко място на страницата фонът на този компонент да сменя цвета си.

Направете връзка, при натискане на която да се появява блок. Направете така, че при натискане във всяко място на прозореца на браузъра нашият блок да се скрива.