Globális eseménykezelők a useEffect segítségével Reactban

Tegyük fel, hogy most azt szeretnénk, hogy a szín ne csak a gombra kattintáskor változzon, hanem a Enter lenyomásakor is a billentyűzeten. A szokásos React életben a window globális objektum figyelése a addEventListener használatával nem megengedett. Ehhez az effektusaink vannak. Adjuk hozzá ezt a műveletet a useEffect segítségével.

Írjunk egy eseménykezelő függvényt a Enter lenyomására. Legyen a szín ebben az esetben piros:

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

Kössük most az eseményfigyelést a window-höz a useEffect hookban:

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

Ha van valamilyen beállító függvényünk, akkor mindig vissza kell adnunk a useEffect-ben egy takarítási vagy leiratkozási kódot, hogy elkerüljük a problémákat a jövőben. Ebben az esetben a addEventListener hozzáadása után vissza kell adnunk az eltávolítását:

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

Adott egy komponens. Állítsd be úgy, hogy a lap bármely pontjára kattintáskor ennek a komponensnek a háttérszíne megváltozzon.

Készíts egy linket, amelyre kattintva megjelenik egy blokk. Állítsd be úgy, hogy a böngészőablak bármely pontjára kattintáskor a blokk elrejtődjön.