Globalūs apdorojimo įvykių valdikliai naudojant useEffect React

Tarkime, kad dabar norime, kad spalva pasikeistų ne tik paspaudus mygtuką, bet ir paspaudus Enter klaviatūroje. Įprastame React gyvenime klausytis globalaus objekto window naudojant addEventListener negalima. Tam mes turime efektus. Pridėkime šį veiksmą naudodami useEffect.

Parašykime įvykio valdiklio funkciją paspaudus Enter. Tegul spalva šiuo atveju pasikeičia į raudoną:

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

Priskirkime dabar įvykių klausymąsi prie window naudojant useEffect hook'ą:

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

Jei turime kokią nors nustatymo funkciją, mums visada reikia useEffect hook'e grąžinti valymo kodą, kad išvengtume problemų ateityje. Šiuo atveju mums reikia po prijungimo addEventListener grąžinti jo pašalinimą:

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

Duotas komponentas. Padarykite taip, kad paspaudus bet kurį puslapio vietą, šio komponento fonas keistų spalvą.

Sukurkite nuorodą, paspaudus kurią atsirastų blokas. Padarykite taip, kad paspaudus bet kurį naršyklės lango vietą mūsų blokas pasislėptų.