React တွင် ခလုတ်တစ်ခုကို နှိပ်ခြင်းဖြင့် ဖောင်ဒေတာများကို လုပ်ဆောင်ခြင်း
ယခင်သင်ခန်းစာတွင် input တစ်ခုထဲသို့ စာလုံးတစ်လုံး ရိုက်ထည့်တိုင်း ရလဒ်ကို အနီးကပ်စာပိုဒ်ထဲတွင် ချက်ချင်းပြသရန် ပြုလုပ်ခဲ့သည်။ ထိုသို့ပြုလုပ်ခြင်းသည် လှပသော်လည်း အားနည်းချက်ရှိသည်။
ကျွန်ုပ်တို့သည် အလေးချိန်ရှိပြီး ရင်းမြစ်သုံးစွဲမှုများသော လုပ်ဆောင်ချက်တစ်ခုကို လုပ်ဆောင်ရန် လိုအပ်သည်ဟု စိတ်ကူးကြည့်ပါ။ စာလုံးတစ်လုံးစီ ရိုက်ထည့်တိုင်း ထိုသို့လုပ်ဆောင်ခြင်းသည် အလွန်အမင်း အကောင်းဆုံးမဟုတ်ပေ - ဒေတာများ အပြီးသတ်ရိုက်ထည့်ပြီးသည်ကို စောင့်ဆိုင်းကာ ထို့နောက် လိုအပ်သော လုပ်ဆောင်ချက်ကို တစ်ကြိမ်တည်း လုပ်ဆောင်ပြီး ရလဒ်ကို စာပိုဒ်ထဲတွင် ပြသခြင်းသည် ပိုကောင်းသည်။
ဤအတွက် ကျွန်ုပ်တို့သည် ခလုတ်တစ်ခုကို မိတ်ဆက်ရန် လိုအပ်သည်၊ ထိုခလုတ်ကို နှိပ်လိုက်သောအခါ ကျွန်ုပ်တို့၏ ရင်းမြစ်သုံးစွဲမှုများသော လုပ်ဆောင်ချက်ကို လုပ်ဆောင်မည်ဖြစ်သည်။ ထိုသို့ဖြစ်လျှင် input တစ်ခုစီအတွက် ၎င်း၏ကိုယ်ပိုင် state တစ်ခု ရှိမည်ဖြစ်ပြီး၊ လုပ်ဆောင်ချက်၏ရလဒ်ကို မှတ်သားရန်နှင့် စကရင်ပေါ်တွင် ပြသရန်အတွက် နောက်ထပ် state တစ်ခု လိုအပ်မည်ဖြစ်သည်။
ဥပမာတစ်ခုဖြင့် ကြည့်ကြပါစို့။ ကျွန်ုပ်တို့တွင် input နှစ်ခုနှင့် ခလုတ်တစ်ခု ရှိသည်ဟု ဆိုကြပါစို့။ ခလုတ်ကို နှိပ်လိုက်သောအခါ input များထဲသို့ ရိုက်ထည့်ထားသော နံပါတ်များ၏ ပေါင်းလဒ်ကို ရှာကြည့်ကြပါစို့။
အကောင်အထည်ဖော်ကြပါစို့။
function App() {
const [value1, setValue1] = useState(0);
const [value2, setValue2] = useState(0);
const [result, setResult] = useState(0);
function handleChange1(event) {
setValue1(event.target.value);
}
function handleChange2(event) {
setValue2(event.target.value);
}
function handleClick() {
setResult(Number(value1) + Number(value2));
}
return <div>
<input value={value1} onChange={handleChange1} />
<input value={value2} onChange={handleChange2} />
<button onClick={handleClick}>btn</button>
<p>result: {result}</p>
</div>;
}
အတိုကောက်ပုံစံကို သုံးနိုင်သည်။
function App() {
const [value1, setValue1] = useState(0);
const [value2, setValue2] = useState(0);
const [result, setResult] = useState(0);
return <div>
<input value={value1} onChange={event => setValue1(event.target.value)} />
<input value={value2} onChange={event => setValue2(event.target.value)} />
<button onClick={() => setResult(Number(value1) + Number(value2))}>btn</button>
<p>result: {result}</p>
</div>;
}
input နှစ်ခု၊ ခလုတ်နှစ်ခုနှင့် စာပိုဒ်တစ်ခု ပေးထားသည်။ input များထဲသို့ နံပါတ်များ ရိုက်ထည့်ပါစို့။ ပထမခလုတ်ကို နှိပ်လိုက်သောအခါ နံပါတ်များ၏ ပေါင်းလဒ်ကို ရှာပါ၊ ဒုတိယခလုတ်ကို နှိပ်လိုက်သောအခါမူ မြှောက်လဒ်ကို ရှာပါ။ ရလဒ်ကို စာပိုဒ်ထဲတွင် ရိုက်ထုတ်ပါ။
input နှစ်ခု၊ ခလုတ်တစ်ခုနှင့် စာပိုဒ်တစ်ခု ပေးထားသည်။ input များထဲသို့ 2025-12-31 ပုံစံဖြင့် ရက်စွဲများ ရိုက်ထည့်ပါစို့။ ခလုတ်ကို နှိပ်လိုက်သောအခါ ရက်စွဲနှစ်ခုကြား ကွာခြားချက်ကို ရက်များဖြင့် ရှာပြီး ရလဒ်ကို စာပိုဒ်ထဲတွင် ရိုက်ထုတ်ပါ။
ယခင်တာဝန်ကို input များတွင် မူလအားဖြင့် လက်ရှိရက်စွဲများ ရှိနေစေရန် ပြုပြင်ပါ။
input တစ်ခုနှင့် စာပိုဒ်တစ်ခု ပေးထားသည်။ input ထဲသို့ နံပါတ်တစ်ခု ရိုက်ထည့်သည်။ အာရုံစိုက်မှု ပျောက်ဆုံးသွားသောအခါ ရိုက်ထည့်ထားသော နံပါတ်၏ ဂဏန်းများ ပေါင်းလဒ်ကို စာပိုဒ်ထဲတွင် ရိုက်ထုတ်ပါ။
input တစ်ခုနှင့် စာပိုဒ်တစ်ခု ပေးထားသည်။ input ထဲသို့ နံပါတ်တစ်ခု ရိုက်ထည့်သည်။ အာရုံစိုက်မှု ပျောက်ဆုံးသွားသောအခါ ရိုက်ထည့်ထားသော နံပါတ်၏ စားလဒ်များ မြှောက်လဒ်ကို စာပိုဒ်ထဲတွင် ရိုက်ထုတ်ပါ။
