This keyword binding in Class Component

အပေါ်မှာ ကျတော်တို့ရေးခဲ့တဲ့ functional နဲ့ class component ကို ပြန်ကြည့်လိုက်ရင် function တွေရေး

တဲ့အခါမှာ ၂ မျိုးကွဲနေတာကို မြင်ရလိမ့်မယ်

ဟုတ်ပါတယ် ကျတော် တမင် ခွဲရေးခဲ့တာပါ ဘာလို့လည်းဆိုတော့ this keyword ကြောင့်လေးပါ

အဲဒါကို သိရအောင်လို့ ကျတော် ဒီလိုခွဲရေးပေးခဲ့တာပါ

တကယ်လို့ ကျတော်တို့ က class component ထဲမှာ regular function expression ကို အသုံးပြုချင်တဲ့

အခါကျရင် ကျတော်တို့က this keyword ကို class က ပိုင်တာဖြစ်ကြောင်းသိစေဖို့အတွက် ကျတော်တို့က

binding လုပ်ပေးရပါမယ် ဘာလို့ ဒီလိုလုပ်ရတာလည်းဆိုတော့ class ထဲမှာရှိတဲ့ state / setState ကိုအသုံး

ပြုချင်လို့ပါ မဟုတ်ရင် သူက undefined ဆိုပြီးတော့ error လာပြပါလိမ့်မယ်

အရင်ဆုံး ကျတော်တို့ function တခုကိုရေးလိုက်ကြရအောင်ဗျ

ကျတော်တို့ class component ရဲ့ clickHandler လေးကို ဒီလိုလေး ပြင်လိုက်ပါမယ်

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

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

တက်လာတာကို မြင်ရလိမ့်မယ်ဗျ

error in console

အဲလိုမျိုး က ဘာကြောင့်တက်ရတာလည်းဆိုတော့ this ဆိုတဲ့ keyword က regular function ထဲမှာဆိုရင်

သူက အဲဒီ function ကိုပဲ ပြန်ညွှန်းပေးတာကြောင့်မလို့ပါ အဲဒါကြောင့် ကျတော်က arrow function လေးကို

အသုံးပြုပြီးတော့ရေးပြသွားတာပါ

သူ့ကို class က နေပီးတော့ လာတဲ့ state / setState တို့ကို အသုံးပြုချင်တဲ့အတွက် ကျတော်တို့က

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

constructor function ထဲမှာ ကျတော်တို့က binding လုပ်ပေးရမှာပါ

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

constructor(props) {
        super(props)
        this.state = {
        count : 0
    }
    this.clickHandler = this.clickHandler.bind(this)
}

ဒီလိုလေးရေးပြီးတော့ ကျတော်တို့က binding လုပ်ပေးရမှာပါ

ဒါဆိုရင် ကျတော်တို့ရဲ့ clickHandler ဆိုတဲ့ function လေးက အရင်အတိုင်းအလုပ်လုပ်သွား ပါလိမ့်မယ်ဗျ

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

အပေါ်က ကုဒ်တွေကိုကြည့်ခြင်းအားဖြင့် ကျတော်တို့က ဘာကြောင့်နောက်ပိုင်း ကျရင် functional ကိုပဲ

အသုံးများလာရတာလည်းဆိုတာကိုမြင်သာမယ်ထင်ကြပါတယ်