Globaalit käsittelijät useEffectin kautta Reactissa

Oletetaan, että nyt haluamme, että väri vaihtuu ei vain napsauttamalla painiketta, vaan myös painamalla Enter näppäimistöllä. Normaalissa React-elämässä globaanli objektia window kuunteleminen käyttäen addEventListener ei ole sallittua. Tätä varten meillä on efektit. Lisätään tämä toiminto käyttäen useEffect.

Kirjoitetaan napsautuksen käsittelijäfunktio painamalle Enter. Olkoon väri tässä tapauksessa muuttumassa punaiseksi:

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

Liitetään nyt tapahtumien kuuntelu kohteeseen window useEffect-hookissa:

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

Jos meillä on jokin asennusfunktio, meidän on aina palautettava useEffect:ssä puhdistus- tai peruutuskoodi, jotta vältämme ongelmia tulevaisuudessa. Tässä tapauksessa meidän on liittämisen jälkeen addEventListener palautettava sen poisto:

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

Komponentti on annettu. Tee niin, että napsauttamalla mihin tahansa sivun kohtaan tämän komponentin tausta vaihtaa väriä.

Tee linkki, jota painamalla lohko ilmestyy. Tee niin, että painamalla mihin tahansa selainikkunan kohtaan lohkomme piilotetaan.