Globalne obsługi za pomocą useEffect w React

Załóżmy, że teraz chcemy, aby kolor zmieniał się nie tylko po kliknięciu przycisku, ale także po naciśnięciu Enter na klawiaturze. W zwykłym życiu React nasłuchiwanie na globalnym obiekcie window używając addEventListener jest niedozwolone. Do tego mamy efekty. Dodajmy tę akcję za pomocą useEffect.

Napiszmy funkcję obsługi po kliknięciu Enter. Niech kolor w tym przypadku zmieni się na czerwony:

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

Przywiążmy teraz nasłuchiwanie zdarzeń do window w hooku useEffect:

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

Jeśli mamy jakąś funkcję konfiguracyjną, to zawsze musimy w useEffect zwrócić kod czyszczący lub anulujący subskrypcję, aby uniknąć problemów w przyszłości. W tym przypadku po dołączeniu addEventListener musimy zwrócić jego usunięcie:

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

Dany jest komponent. Spraw, aby po kliknięciu w dowolne miejsce na stronie tło tego komponentu zmieniało kolor.

Stwórz link, po kliknięciu którego pojawi się blok. Spraw, aby po kliknięciu w dowolne miejsce okna przeglądarki nasz blok był ukryty.