Globalni rukovaoci putem useEffect u Reactu

Pretpostavimo da sada želimo da se boja menja ne samo klikom na dugme, već i pritiskom tastera Enter na tastaturi. U običnom React okruženju, slušanje globalnog objekta window korišćenjem addEventListener nije dozvoljeno. Za to imamo efekte. Hajde da dodamo ovu akciju pomoću useEffect.

Napišimo funkciju rukovaoca za pritisak tastera Enter. Neka boja u ovom slučaju postane crvena:

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

Sada povežimo slušanje događaja sa window u hook-u useEffect:

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

Ako imamo bilo kakvu funkciju za postavljanje, onda uvek moramo u useEffect vratiti kod za čišćenje ili odjavu, kako bismo izbegli probleme kasnije. U ovom slučaju, nakon dodavanja addEventListener, moramo vratiti njegovo uklanjanje:

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

Dat je komponent. Uredite ga tako da klikom na bilo koje mesto na stranici pozadina ovog komponenta promeni boju.

Napravite link, čijim klikom će se pojaviti blok. Uredite tako da pritiskom na bilo koje mesto u prozoru pretraživača naš blok bude sakriven.