Gestionnaires globaux via useEffect dans React

Supposons que maintenant nous voulons que la couleur change non seulement en cliquant sur le bouton, mais aussi en appuyant sur Enter au clavier. Dans la vie React normale, il n'est pas possible d'écouter l'objet global window en utilisant addEventListener. Pour cela, nous avons les effets. Ajoutons cette action en utilisant useEffect.

Écrivons la fonction gestionnaire pour le clic sur Enter. Que la couleur dans ce cas change en rouge :

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

Attachons maintenant l'écoute des événements à window dans le hook useEffect :

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

Si nous avons une fonction d'installation, nous devons toujours retourner dans useEffect un code de nettoyage ou de désabonnement, afin d'éviter des problèmes ultérieurs. Dans ce cas, nous devons après l'attachement de addEventListener retourner sa suppression :

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