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

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

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

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

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

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

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

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