Globalni obdelovalci prek useEffect v Reactu

Recimo, da zdaj želimo, da se barva spremeni ne le ob kliku na gumb, temveč tudi ob pritisku tipke Enter na tipkovnici. V običajnem React razvoju ne moremo neposredno poslušati globalnega objekta window z uporabo addEventListener. Za to imamo efekte. Dodajmo to funkcionalnost s pomočjo useEffect.

Napišimo funkcijo obdelovalca za pritisk tipke Enter. Naj se barva v tem primeru spremeni v rdečo:

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

Povežimo zdaj poslušanje dogodkov na window v hooku useEffect:

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

Če imamo kakšno nastavitveno funkcijo, moramo vedno v useEffect vrniti kodo za čiščenje ali odjavo, da se izognemo težavam v prihodnosti. V tem primeru moramo po dodajanju addEventListener vrniti njegovo odstranjevanje:

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

Podan je komponent. Naredite tako, da ob kliku na katero koli mesto strani ozadje tega komponenta spremeni barvo.

Naredite povezavo, ob kliku na katero se bo prikazal blok. Naredite tako, da ob kliku na katero koli mesto okna brskalnika se naš blok skrije.