Globaalsed töötlejad läbi useEffecti Reactis

Oletame, et nüüd tahame, et värv muutuks mitte ainult nupu klõpsamisel, vaid ka klaviatuuril Enter vajutamisel. Tavalises React elus globaalse objekti window kuulamisel kasutades addEventListener ei ole võimalik. Selleks on meil efektid. Lisame selle tegevuse kasutades useEffect.

Kirjutame töötlejafunktsiooni Enter vajutuse jaoks. Olgu värv sellisel juhul punaseks:

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

Seome nüüd sündmuste kuulamise window külge useEffect hookis:

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

Kui meil on mingi seadistav funktsioon, siis peame alati useEffect tagastama puhastuskoodi või tellimuse tühistamise, et vältida probleeme tulevikus. Antud juhul peame peale addEventListener lisamist tagastama selle eemaldamise:

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