Përpunuesit Globalë përmes useEffect në React

Supozoni se tani duam që ngjyra të ndryshojë jo vetëm me klikim në butonin, por edhe me shtypjen e Enter në tastierë. Në jetën e zakonshme të React dëgjimi i objektit global window duke përdorur addEventListener nuk lejohet. Për këtë kemi efekte. Le ta shtojmë këtë veprim duke përdorur useEffect.

Le të shkruajmë funksionin përpunues për klikimin në Enter. Le të ndryshojë ngjyra në këtë rast në të kuqe:

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

Le të lidhim tani dëgjimin e ngjarjeve në window në hook useEffect:

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

Nëse kemi ndonjë funksion konfigurues, atëherë gjithmonë duhet të kthejmë në useEffect kodin e pastrimit ose çregjistrimit, në mënyrë që të shmangim problemet në të ardhmen. Në këtë rast, pas lidhjes së addEventListener, duhet ta kthejmë heqjen e tij:

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

Është dhënë një komponent. Bëni të tillë që me klikim në çdo vend të faqes, sfondi i këtij komponenti të ndryshojë ngjyrën.

Krijoni një lidhje, me shtypjen e së cilës do të shfaqet një bllok. Bëni të tillë që me shtypje në çdo vend të dritares së shfletuesit blloku ynë të fshihet.