React တွင် useEffect မှတဆင့် Global Event Handlers များ

ယခုကျွန်ုပ်တို့လိုချင်သည်မှာ ခလုတ်ကိုနှိပ်ခြင်းဖြင့်သာမက ကီးဘုတ်ပေါ်ရှိ Enter ကိုနှိပ်ခြင်းဖြင့်လည်း အရောင်ပြောင်းလိုပါသည်။ သာမန် React ဘဝတွင် global object window ကို addEventListener ဖြင့် နားထောင်ခြင်းမပြုလုပ်နိုင်ပါ။ ၎င်းအတွက် ကျွန်ုပ်တို့တွင် effects များရှိပါသည်။ useEffect ကိုအသုံးပြု၍ ဤလုပ်ဆောင်ချက်ကို ထည့်သွင်းကြပါစို့။

Enter ကိုနှိပ်သည့်အခါ အရောင်အနီသို့ပြောင်းစေမည့် function တစ်ခုကိုရေးကြပါစို့။

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

ယခု event listener ကို window သို့ useEffect hook အတွင်းတွင် ချိတ်ဆက်ကြပါစို့။

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

တည်ဆောက်သည့် function ရှိပါက အနာဂတ်တွင် ပြဿနာများကိုရှောင်ရှားရန် သန့်ရှင်းရေး (cleanup) သို့မဟုတ် စာရင်းမှထုတ်ခြင်း (unsubscribe) code ကို useEffect အတွင်း၌ အမြဲပြန်ပေးရပါမည်။ ဤကိစ္စတွင် addEventListener ချိတ်ဆက်ပြီးနောက် ၎င်း၏ဖျက်ခြင်းကို ပြန်ပေးရပါမည်။

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

Component တစ်ခုပေးထားသည်။ စာမျက်နှာ၏ မည်သည့်နေရာကိုမဆိုနှိပ်လိုက်သည့်အခါ ထို component ၏ background အရောင်ပြောင်းသွားစေရန် လုပ်ဆောင်ပေးပါ။

�ှိပ်လိုက်သည့်အခါ block တစ်ခုပေါ်လာမည့် �င့်ခ်တစ်ခုလုပ်ပါ။ Browser window ၏ မည်သည့်နေရာကိုမဆို နှိပ်လိုက်သည့်အခါတိုင်း ကျွန်ုပ်တို့၏ block ကို ပိတ်သွားစေရန် လုပ်ဆောင်ပေးပါ။