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:

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

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

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

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

Denne komponenten er gitt. Gjør slik at ved klikk på et hvilket som helst sted på siden, endres bakgrunnsfargen til denne komponenten.

Lag en lenke, ved klikk på denne skal en blokk vises. Gjør slik at ved klikk på et hvilket som helst sted i nettleservinduet skjules blokken vår.