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:

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

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

App.jsxuseEffect(() => {
  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:

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