Event Handling ( Changing State )

ကျတော်တို့ ကုဒ်တွေကို အရင်ရေးလိုက်ကြရအောင် အရင်ဆုံး ကျတော်တို့ button ထဲမှာ event

လေးတခုကိုရေးကြရအောင်

အဲဒါက ဘာလည်းဆိုတော့ click ဆိုတဲ့ဟာလေး

ကျတော်တို့က html မဟုတ်တဲ့အတွက် ရေးရမယ့်ဟာလေးတွေက နည်းနည်းလေးတော့ပြောင်းပါတယ်

ဘယ်လိုမျိုးလည်းဆိုတော့ onClick ဆိုပီးတော့ရေးရမှာပါ

return(
    <>
        <h1>{this.state.count}</h1>
        <button onClick={this.clickHandler}>Add One</button>
    </>
)

အဲလိုလေးရေးပြီးတော့ ကျတော်တို့က clickHandler function တစ်ခုကို create လုပ်ကြရအောင်

render ရဲ့ အထက်မှာ create လုပ်လိုက်ပါမယ်

ပြီးတော့ ကျတော်တို့က state ကို စတင်ပီးတော့ ပြောင်းလဲဖို့ အတွက် သူ့ကိုပြောင်းလဲဖို့အတွက် method

လေးတစ်ခုရှိပါတယ် အဲဒါက ဘာလည်းဆိုတော့ setState ဆိုတဲ့ ဟာလေးပါ

အဲဒါကိုအသုံးပြုပြီးတော့ ကျတော်တို့ state ကို ပြောင်းလဲပေးရမှာပါ

ဟာ အဲဒါဆို ဒီလိုရေးရင်ကောမရဘူးလား ဘာလို့ setStateကို အသုံးပြုမှရတာလည်း လို့ မေးစရာရှိလာပါလိမ့်မယ်

clickHandler = () => {
    this.state = {
        count : this.state.count + 1
    }
    console.log(this.state.count)
}

အဲလိုမျိုး မေးခွန်းအတွက် ရလားဆိုတော့ ရပါတယ်

ဒါပေမယ့် သူက state ကိုပဲ ပြောင်းလဲပေးတာ

ကျတော်တို့က ဘာကိုပါ ထပ်ပြီးတော့အလုပ်လုပ်စေချင်တာလည်းဆိုတော့ ကျတော်တို့က ပြောင်းလဲလိုက်တဲ့

state ကို browser ပေါ်မှာ ပြန်မြင်စေချင်တာမလို့ setState ကိုအသုံးပြုတာပါ

setState ဆိုတာက ဘယ်လိုမျိုးအလုပ်လုပ်တာလည်းဆိုတော့ ကျတော်တို့ react component တခုမှာရှိတဲ့

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

အဲလိုမျိုး ပြန်လုပ်တဲ့အတွက် ကျတော်တို့ ပြောင်းလဲလိုက်တဲ့ ပြောင်းလဲမှုတွေကို browser ပေါ်မှာ ပါ

ပြောင်းလဲပြစေချင်တဲ့အတွက် ကျတော်တို့ က setState ကိုအသုံးပြုပေးရတာပါ

ကဲ ဒါဆိုရင်ကျတော်တို့ ကုဒ်တွေကို ဆက်ရေးလိုက်ကြရအောင်

clickHandler = () => {
    this.setState({
        count : this.state.count + 1
    })
}

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

ဒေတာပါ လိုက်ပြောင်းလဲနေတာကိုမြင်ရပါလိမ့်မယ်

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