# Event Handling

ကျတော်တို့ အခု react ရဲ့ state တွေကို တော်တော်လေး နားလည်းသွားကြမယ်လို့ထင်မိပါတယ်

အခုလက်ရှိကတော့ ကျတော်တို့က react ရဲ့ state ကို အသုံးပြုမယ့် event handle တွေအကြောင်းကို&#x20;

ဆက်လေ့လာသွားကြရအောင် ဘယ်လိုမျိုးလည်းဆိုတော့ ကျတော်တို့က vanilla js မှာဆိုရင် event တွေကို&#x20;

ကျတော်တို့ `addEventListener` တွေနဲ့ စောင့်ကြတယ်မလား

အဲလိုမျိုးပါပဲ့ ကျတော်တို့မှာက JSX ရဲ့အထဲမှာ အသုံးပြုပီးတော့ event တွေကို handle လုပ်ရမယ့်&#x20;

method (attribute) လေးတွေ ရှိကြပါတယ် ဘာလို့ attribute လို့ပြောတာလည်းဆိုတော့ သူက html tag&#x20;

မှာလိုမျိုး မြင် သာအောင်ပြောပြလိုက်တာပါ

တော်တော်အသုံးများတဲ့ event တွေက တော့&#x20;

`onClick` ( ကျတော်တို့ click နိပ်တာကိုစောင့်ပေးတဲ့ event အများအားဖြင့် button တွေမှာ အသုံးများ )

`onChange` ( ကျတော်တို့ ရဲ့ ပြောင်းလဲမှုတွေကို စောင့်ကြည့်ပေးတဲ့ event အများအားဖြင့် input တွေမှာ အသုံးများ )

`onSubmit` ( ကျတော် တို့ form submission တွေ ကို စောင့်ကြည့်ပေးတဲ့ event အများအားဖြင့် form တွေမှာ အသုံးများ )

ဒီသုံးခုက တော့ တော်တော်လေး အသုံးများကြပါတယ်

အခုက လက်ရှိကျတော်တို့ ဆက်လေ့လာကြရမှာက `onChange` အကြောင်းပါပဲ&#x20;

ဘာလို့ onChange ကြီးကို ကျတော်က လာပြောပြရတာလည်းဆိုတော့ ကျတော် ရှင်းပြဖို့တွေးထားတာလေး&#x20;

တစ်ခုရှိလို့ပါ&#x20;

ကဲ စလိုက်ကြရအောင်ဗျ အရင်ဆုံး ကျတော်တို့ input လေးတခု ဖန်တီးလိုက်ပါမယ်

```jsx
function Input () {
    return(
        <input type="text" />
    )
}
```

ကျတော်တို့ အခုလိုမျိုး ဖန်တီးပြီးတော့ state နဲ့ စတင်ပီးတော့ control လုပ်လိုက်တော့မှာပါ&#x20;

ဘယ်လိုမျိုးလည်းဆိုတော့ ကျတော်တို့ ကုဒ်ကို ဒီလိုလေး ပြင်လိုက်ပါမယ်<br>

```jsx
import { useState } from 'react'

function Input () {
const [ userName , setUserName ] = useState("")
    return(
        <input 
        type="text"
        name="userName"
        value={userName}
        placeholder="Enter username"
         />
    )
}
export default Input;
```

ကျတော်တို့ ဒီလိုလေး ရေးလိုက်ပီးရင် browser မှာ သွားပြီးတော့ ကျတော်တို့ စာရိုက်ကြည့်ရင်&#x20;

input မှာက ကျတော်တို့ စာရိုက်လို့မရတာ ကိုမြင်ရပါလိမ့်မယ်

ဘာလို့လည်းဆိုတော့ ကျတော်တို့က input ရဲ့ value ထဲကို state ကိုထည့်ပြီးတော့ control&#x20;

လုပ်လိုက်တာဖြစ်တဲ့အတွက် ကျတော်တို့ရဲ့ state က ပြောင်းလဲမှုမလုပ်မချင်း သူ့မှာက စာတွေလာပေါ်မှာမဟုတ်ပါဘူး&#x20;

စာတွေပဲမပေါ် ဖြစ်တာပါ ကျတော်တို့ရိုက်လိုက်တဲ့ value တွေက အကုန်လုံး ရှိနေပါလိမ့်မယ် ကျတော်တို့&#x20;

onChange လေး ဆက်ရေးကြည့်လိုက်ကြရအောင်<br>

```jsx
import { useState } from 'react'

function Input () {
const [ userName , setUserName ] = useState("")
    const inputHandler = (e) => {
        console.log(e.target.value)
    }
    return(
        <input 
        type="text"
        name="userName"
        value={userName}
        placeholder="Enter username"
        onChange={inputHandler}
         />
    )
}
export default Input;
```

ကျတော်တို့ အခုလိုမျိုးရေးပြီးတော့ console မှာသွားကြည့်လိုက်မယ်ဆိုရင်

<figure><img src="https://lh3.googleusercontent.com/2oxm-6NGn9Znx2lL0kpVdymFwKjIxppXyrucpfka1XRMLSVdkEDgEY0jM-wYHulL_3krIiKzeCmm0x7e_4T7spOUeB7I6ZAuad_4iwdpWaPDgyhy9z96Eh2-FMYbwpe6P6yVjgDlQ8fUP4BICx8WlyY" alt=""><figcaption></figcaption></figure>

ဒီလိုလေးမြင်ရမှာပါ ပြောချင်တာက ဒီ input လေးကို ကျတော်တို့က state နဲ့ control လုပ်လိုက်ပီးပီပေါ့

&#x20;သူ့ရဲ့ data လေးကို ယူချင်တဲ့အခါကျတော့ ကျတော်တို့က ဘယ်လိုမျိုးပြန်ပီးတော့ update လုပ်ရမလဲပေါ့&#x20;

အဲလိုမျိုး ကို ကျတော်တို့က setUsername ဆိုတဲ့ အထဲကို event ရဲ့ value လေးကို ထည့်ပေးလိုက်ရုံပါပဲ

```jsx
import { useState } from 'react'

function Input () {
const [ userName , setUserName ] = useState("")
    const inputHandler = (e) => {
        console.log(e.target.value)
        setUserName(e.target.value)
    }
    return(
        <input 
        type="text"
        name="userName"
        value={userName}
        placeholder="Enter username"
        onChange={inputHandler}
         />
    )
}
export default Input;
```

ကျတော်တို့ အဲလိုလေးရေးပြီးတဲ့အခါမှာ browser မှာ ပြန်သွားကြည့်လိုက်ရင် ကျတော်တို့ စာရိုက်လို့ရသွားတာကို

မြင်ရပါလိမ့်မယ် ဒီအချိန်မှာ ဘာတခုထူးဆန်းတာလည်းဆိုတော့ ကျတော်တို့ က setState နဲ့မလုပ်ခင်တုန်းက&#x20;

စာရိုက်ရင်း အခုလိုမျိုး စာလုံးဆက်ပီး တော့မထွက်လာဘဲနဲ့ အခုမှ စာလုံးဆက်ပီးတော့ ထွက်လာတာကိုမြင်ရပါလိမ့်မယ်&#x20;

အဲဒါက ဘာကြောင့်လည်းဆိုတော့ ကျတော်တို့က react ကနေပီးတော့ control မလုပ်သေးခင် setState ကို&#x20;

မထည့်ပေးသေးခင်မှာသူက ဘာကိုပဲသိတာလည်းဆိုတော့အခုလက်ရှိ change ဖြစ်သွားတဲ့ event ကိုပဲ သိတာပါ&#x20;

အဲဒါကို ကျတော်တို့က setState နဲ့ change လုပ်လိုက်တဲ့အခါမှာ input ရဲ့ value ထဲကို state က&#x20;

ဝင်သွားတဲ့အတွက် ကျတော်တို့က အရင်ရှိခဲ့တဲ့ value နဲ့ update value က string concatenation ဖြစ်သွားတာပါ

&#x20;အဲအတွက်ကြောင့် ကျတော်တို့က စာရိုက်လိုက်တဲ့အခါမှာ ဒီလိုလေး မြင်ရတာ ဖြစ်တာပါ မဟုတ်ရင်စာတလုံးချင်း&#x20;

ပေါ်နေရင်တော့ဘာမှမထူးသွားပါဘူး

ဒီလောက်ဆိုရင် ကျတော်တို့ onChange event အကြောင်းကို တော်တော်လေး နားလည်မယ်လို့ ထင်ပါတယ်&#x20;

ဒါဆိုရင်ကျတော်တို့ နောက်ထပ် တမျိုးကိုဆက်ပြီးတော့လေ့လာလိုက်ကြရအောင်

&#x20;အဲဒါက ဘာလည်းဆိုတော့ onSubmit ဆိုတဲ့ဟာလေးပါ အဲကောင်က ဘယ်လိုမျိုး&#x20;

မှာအသုံးများတာလည်းဆိုတော့ ကျတော်တို့က form တွေကို submit လုပ်တဲ့အခါမှာအသုံးပြုကြတာပါ

သူ့မှာက ထူးခြားတာက တခြားကြီးကြီးမားမားမရှိပါဘူးဗျ vanilla js မှာ သုံးတဲ့အတိုင်း အတူတူပါပဲဗျာ&#x20;

အဲလောက်ဆိုရင်တော့ ကျတော်တို့ event handling တွေကို နားလည်သွားမယ်လို့ထင်ပါတယ်

<br>
