Globaalsed töötlejad läbi useEffecti Reactis

Oletame, et nüüd tahame, et värv muutuks mitte ainult nupu klõpsamisel, vaid ka klaviatuuril Enter vajutamisel. Tavalises React elus globaalse objekti window kuulamisel kasutades addEventListener ei ole võimalik. Selleks on meil efektid. Lisame selle tegevuse kasutades useEffect.

Kirjutame töötlejafunktsiooni Enter vajutuse jaoks. Olgu värv sellisel juhul punaseks:

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

Seome nüüd sündmuste kuulamise window külge useEffect hookis:

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

Kui meil on mingi seadistav funktsioon, siis peame alati useEffect tagastama puhastuskoodi või tellimuse tühistamise, et vältida probleeme tulevikus. Antud juhul peame peale addEventListener lisamist tagastama selle eemaldamise:

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

Antud komponent. Tehke nii, et lehe suvalisele kohale klõpsates selle komponendi taustavärv muutuks.

Tehke link, millele vajutades ilmub plokk. Tehke nii, et brauseri akna suvalisele kohale vajutades meie plokk peidetakse.