Thuta Learning
React
BasicWeb Developmentintermediate

Handling Events

Event handling ဆိုတာ user action တစ်ခုဖြစ်တဲ့ click, typing, submit, mouse move စတာတွေကို React ကတုံ့ပြန်အောင်ရေးတာပါ။ React event name တွေက camelCase ဖြစ်ပြီး function reference ကို `{}` ထဲမှာထည့်ပေးရပါတယ်။

jsx
function MyButton() {
  function handleClick() {
    alert('Button was clicked!');
  }

  return (
    <button onClick={handleClick}>
      Click Me
    </button>
  );
}

Button ကိုနှိပ်တဲ့အချိန်မှသာ `handleClick` function run ဖြစ်ပါတယ်။ React က browser event ကိုဖမ်းပြီး သတ်မှတ်ထားတဲ့ function ကိုခေါ်ပေးတာပါ။

You should see
Button ကိုနှိပ်လိုက်ရင် alert box တစ်ခု ပေါ်လာမယ်။

Info

Function ကို call လုပ်တာမဟုတ်ဘဲ reference ပေးထားတာကို သတိထားပါ—`handleClick` ဖြစ်ရမယ်၊ `handleClick()` မဟုတ်ပါ။

ဒီနေရာမှာ လူအများမှားတတ်တယ်

  • `onClick="handleClick"` လို့ HTML ပုံစံရေးလို့မရပါ။ React မှာ `onClick={handleClick}` လို့ JavaScript expression အဖြစ်ပေးရပါတယ်။
Handling Events | Thuta Learning