Globale behandlere via useEffect i React

La oss anta at vi nå ønsker at fargen skal endres ikke bare ved klikk på knappen, men også ved å trykke på Enter på tastaturet. I et vanlig React-liv kan man ikke lytte til det globale objektet window ved å bruke addEventListener. For dette har vi effekter. La oss legge til denne handlingen ved hjelp av useEffect.

La oss skrive en behandlingsfunksjon for klikk på Enter. La fargen i dette tilfellet endres til rød:

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

La oss nå binde hendelseslytteren til window i useEffect-hooken:

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

Hvis vi har en oppsettsfunksjon, må vi alltid i useEffect returnere en oppryddingskode for å unngå problemer senere. I dette tilfellet må vi etter å ha festet addEventListener returnere fjerningen av den:

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