React တွင် State မြှင့်တင်ခြင်း

မကြာခဏ component အများအပြားသည် တူညီသော ပြောင်းလဲနေသည့်ဒေတာကို ရောင်ပြန်ဟပ်ရန် လိုအပ်ပါသည်။ React တွင် ဘုံ state ကို အနီးဆုံးဘုံအမိဘတစ်ဦးဆီသို့ မြှင့်တင်ရန် ထောက်ခံထားပါသည်။ ဥပမာတစ်ခုကြည့်ကြပါစို့။

ကျွန်ုပ်တို့သည် ရေအပူချိန် ဂဏန်းပေါင်းစက်တစ်ခုလုပ်လိုသည်ဆိုပါစို့။ ၎င်းသည် user မှ အပူချိန်ထည့်သွင်းရန် input တစ်ခုနှင့် အဆုံးအဖြတ်ထုတ်ပေးရန် အတည်ပြုချက်ကို ထုတ်ပြမည့် စာပိုဒ်တိုတစ်ခု ဖြစ်လိမ့်မည်။ ရေသည် အရည်၊ ရေသည် အစိုင်အခဲ၊ ရေသည် အငွေ့။

ကျွန်ုပ်တို့၏ ဂဏန်းပေါင်းစက်သည် container component Calculator တစ်ခုအဖြစ် ကိုယ်စားပြုသည်ဆိုပါစို့။

jsxfunction Calculator() {
  return <div>
    
  </div>;
}

အပူချိန်ထည့်သွင်းရန် input ကို component TempInp ထဲသို့ထုတ်၍၊ အတည်ပြုချက်စာပိုဒ်တိုကို component Verdict ထဲသို့ ထုတ်လိုက်ကြပါစို့။

jsxfunction Calculator() {
  return <div>
    <Verdict />
    <TempInp />
  </div>;
}

TempInp နှင့် Verdict တို့နှစ်ခုစလုံးတွင် အပူချိန်နှင့်အတူ state ရှိရမည်မှာ သိသာထင်ရှားပါသည်။ ထိုသို့ဖြစ်လျှင် ၎င်းသည် တူညီသောအပူချိန်တစ်ခုဖြစ်သင့်သည်မှာ ယုတ္တိရှိပါသည်။ input ထဲသို့ ဒေတာများထည့်သွင်းသည်နှင့်အမျှ အတည်ပြုချက်ကို ပြသသင့်ပါသည်။

ထိုကဲ့သို့သောအခြေအနေတွင် state မြှင့်တင်ခြင်း ဟုခေါ်သော နည်းလမ်းကို အသုံးပြုရန် အကြံပြုထားပါသည်။ component နှစ်ခု (သို့မဟုတ် ထို့ထက်ပိုသော) အတွက် ဘုံ state ကို ၎င်းတို့၏ ဘုံမိဘတစ်ဦးဆီသို့ မြှင့်တင်လိုက်ပါသည်။

ကျွန်ုပ်တို့၏ကိစ္စတွင် အပူချိန်နှင့်အတူ state သည် component Calculator ပိုင်ဆိုင်ပြီး ၎င်းက prop အဖြစ် TempInp နှင့် Verdict တို့ထံသို့ လွှဲပြောင်းပေးမည်ဖြစ်သည်။

jsxfunction Calculator() {
  const [temp, setTemp] = useState(0);
  
  return <div>
    <Verdict temp={temp} />
    <TempInp temp={temp} />
  </div>;
}

Component TempInp တွင် အပူချိန်ပြောင်းလဲရန် input တစ်ခုရှိသင့်ပါသည်။ သို့သော်၊ ထို အပူချိန်သည် ဤ component ၏ prop ဖြစ်သောကြောင့် တိုက်ရိုက် TempInp ထဲတွင် ၎င်းကို ပြောင်းလဲ၍မရပါ။ Component Calculator မှ အပူချိန်ပြောင်းလဲရန် အထူးလုပ်ဆောင်ချက်တစ်ခုကို လွှဲပြောင်းပေးရန် မှန်ကန်ပါသည်။

jsxfunction Calculator() {
  const [temp, setTemp] = useState(0);
  
  function changeTemp(event) {
    setTemp(event.target.value);
  }
  
  return <div>
    <Verdict temp={temp} />
    <TempInp temp={temp} changeTemp={changeTemp} />
  </div>;
}

တကယ်တော့၊ လုပ်ဆောင်ချက်အသစ်တစ်ခုမမိတ်ဆက်ဘဲ၊ ကလေး component ထံသို့ function setTemp ကို လွှဲပြောင်းနိုင်ပါသည်။

jsxfunction Calculator() {
  const [temp, setTemp] = useState(0);
  
  return <div>
    <Verdict temp={temp} />
    <TempInp temp={temp} setTemp={setTemp} />
  </div>;
}