Глобални обработувачи преку useEffect во React

Да претпоставиме дека сега сакаме бојата кај нас да се менува не само при клик на копчето, туку и при притискање на Enter на тастатурата. Во обичен React живот слушањето на глобалниот објект window користејќи addEventListener не е дозволено. За ова ги имаме ефектите. Ајде да го додадеме ова дејство со помош на useEffect.

Да напишеме функција за обработка при клик на Enter. Нека бојата во овој случај се смени во црвена:

function handleEnter(event) {
	if (event.keyCode === 13) {
		setColor('red');
	}
}

Сега да го поврземе слушањето на настани со window во hook-от 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]);

Даден е компонент. Направете така што при клик на кое било место на страната позадината на овој компонент да ја менува бојата.

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