React-də useEffect vasitəsilə Qlobal İşləyicilər

Təsəvvür edək ki, indi istəyirik ki, rəng yalnız düyməyə klikləməklə deyil, həm də klaviaturda Enter düyməsinə basılmaqla dəyişsin. Adi React həyatında window qlobal obyektini addEventListener istifadə edərək dinləmək olmaz. Bunun üçün bizdə efektlər var. Gəlin bunu useEffect vasitəsilə əlavə edək.

Gəlin Enter düyməsinə basılma hadisəsini əmələ gətirən funksiya yazaq. Fərz edək ki, rəng bu halda qırmızıya dəyişir:

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

İndi hadisə dinləməni useEffect hookunda window-a bağlayaq:

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

Əgər bizim hansısa quraşdırma funksiyamız varsa, onda biz həmişə useEffect-də təmizləmə və ya abunəni dayandırma kodunu qaytarmalıyıq ki, gələcəkdə problemlərin qarşısını alaq. Bu halda biz addEventListener əlavə etdikdən sonra onun silinməsini qaytarmalıyıq:

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

Komponent verilib. Elə edin ki, səhifənin istənilən yerinə kliklənəndə bu komponentin fon rəngi dəyişsin.

Bir link hazırlayın, ona kliklənəndə blok görünsün. Elə edin ki, brauzer pəncərəsinin istənilən yerinə kliklənəndə blokumuz gizlinsin.