Globale håndterere via useEffect i React

Antag, at vi nu ønsker, at farven skal skifte ikke kun ved klik på knappen, men også ved at trykke på Enter på tastaturet. I et normalt React liv kan man ikke lytte på det globale objekt window ved at bruge addEventListener. Til dette har vi effekter. Lad os tilføje denne handling med useEffect.

Lad os skrive en handlerfunktion for klik på Enter. Lad farven i dette tilfælde skifte til rød:

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

Lad os nu binde eventlytteren til window i useEffect hooket:

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

Hvis vi har en opsætningsfunktion, skal vi altid i useEffect returnere en oprydningskode eller afmeldingskode for at undgå problemer senere. I dette tilfælde skal vi efter tilføjelsen af addEventListener returnere dens fjernelse:

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

Der er givet en komponent. Gør så, at ved klik på ethvert sted på siden skal baggrunden for denne komponent skifte farve.

Lav et link, ved klik på hvilket en blok vil blive vist. Gør så, at ved klik på ethvert sted i browserens vindue skal vores blok skjules.