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 :

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

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

useEffect(() => {
	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 :

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

Un composant est donné. Faites en sorte qu'en cliquant sur n'importe quel endroit de la page, le fond de ce composant change de couleur.

Créez un lien, en cliquant sur lequel un bloc apparaîtra. Faites en sorte qu'en cliquant sur n'importe quel endroit de la fenêtre du navigateur, notre bloc se cache.