Globálne obsluhy prostredníctvom useEffect v Reacte

Predpokladajme, že teraz chceme, aby sa farba menila nielen kliknutím na tlačidlo, ale aj stlačením Enter na klávesnici. V bežnom React živote nie je možné počúvať na globálny objekt window použitím addEventListener. Na to máme efekty. Pridajme túto akciu pomocou useEffect.

Napíšme funkciu obsluhy pre kliknutie na Enter. Nech farba v tomto prípade zmení na červenú:

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

Teraz pripojme počúvanie udalostí na window v hooku useEffect:

useEffect(() => {
	document.body.style.color = color;
	
	window.addEventListener('keydown', handleEnter);
}, [color]);

Ak máme nejakú inštalačnú funkciu, vždy musíme v useEffect vrátiť kód na vyčistenie alebo odhlásenie, aby sme sa vyhli problémom v budúcnosti. V tomto prípade potrebujeme po pripojení addEventListener vrátiť jeho odstránenie:

useEffect(() => {
	document.body.style.color = color;
	
	window.addEventListener('keydown', handleEnter);
	
	return () => {
		window.removeEventListener('keydown', handleEnter);
	};
}, [color]);

Daný komponent. Urobte tak, aby sa kliknutím na akékoľvek miesto stránky pozadie tohto komponentu zmenilo farbu.

Vytvorte odkaz, po kliknutí na ktorý sa zobrazí blok. Urobte tak, aby sa po kliknutí na akékoľvek miesto okna prehliadača náš blok skryl.