Globální obslužné rutiny přes useEffect v Reactu

Předpokládejme, že nyní chceme, aby se barva měnila nejen po kliknutí na tlačítko, ale také po stisknutí Enter na klávesnici. V běžném React životě nemůžeme poslouchat globální objekt window pomocí addEventListener. K tomu máme efekty. Pojďme přidat tuto akci pomocí useEffect.

Napišme funkci obslužné rutiny pro kliknutí na Enter. Ať se barva v tomto případě změní na červenou:

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

Nyní připojme poslouchání událostí k window v hooku useEffect:

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

Pokud máme nějakou instalační funkci, musíme vždy v useEffect vrátit kód pro čištění nebo odhlášení, abychom předešli problémům v budoucnu. V tomto případě potřebujeme po připojení addEventListener vrátit jeho odstranění:

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