Globale event handlers via useEffect in React

Stel dat we nu willen dat de kleur niet alleen verandert bij een klik op de knop, maar ook bij het indrukken van Enter op het toetsenbord. In een normale React-omgeving kun je het globale object window niet beluisteren met behulp van addEventListener. Hiervoor hebben we effects. Laten we deze actie toevoegen met useEffect.

Laten we een handlerfunctie schrijven voor de klik op Enter. Laat de kleur in dit geval veranderen in rood:

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

Laten we nu het luisteren naar events koppelen aan window in de useEffect hook:

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

Als we een setup-functie hebben, moeten we altijd in useEffect een cleanup-functie retourneren om problemen in de toekomst te voorkomen. In dit geval moeten we na het toevoegen van addEventListener het verwijderen retourneren:

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

Er is een component gegeven. Zorg ervoor dat bij een klik op een willekeurige plaats op de pagina de achtergrond van dit component van kleur verandert.

Maak een link, waarop wanneer geklikt wordt er een blok verschijnt. Zorg ervoor dat wanneer er ergens in het browservenster geklikt wordt ons blok verborgen wordt.