Event Handling

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

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

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

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

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

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

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

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

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

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

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

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

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

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

တစ်ခုရှိလို့ပါ

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

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

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

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

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 မှာ သွားပြီးတော့ ကျတော်တို့ စာရိုက်ကြည့်ရင်

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

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

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

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

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

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 မှာသွားကြည့်လိုက်မယ်ဆိုရင်

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

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

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

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 နဲ့မလုပ်ခင်တုန်းက

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

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

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

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

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

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

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

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

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

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

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

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

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