React တွင် ခလုတ်တစ်ခုကို နှိပ်ခြင်းဖြင့် ဖောင်ဒေတာများကို လုပ်ဆောင်ခြင်း

ယခင်သင်ခန်းစာတွင် input တစ်ခုထဲသို့ စာလုံးတစ်လုံး ရိုက်ထည့်တိုင်း ရလဒ်ကို အနီးကပ်စာပိုဒ်ထဲတွင် ချက်ချင်းပြသရန် ပြုလုပ်ခဲ့သည်။ ထိုသို့ပြုလုပ်ခြင်းသည် လှပသော်လည်း အားနည်းချက်ရှိသည်။

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

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

ဥပမာတစ်ခုဖြင့် ကြည့်ကြပါစို့။ ကျွန်ုပ်တို့တွင် input နှစ်ခုနှင့် ခလုတ်တစ်ခု ရှိသည်ဟု ဆိုကြပါစို့။ ခလုတ်ကို နှိပ်လိုက်သောအခါ input များထဲသို့ ရိုက်ထည့်ထားသော နံပါတ်များ၏ ပေါင်းလဒ်ကို ရှာကြည့်ကြပါစို့။

အကောင်အထည်ဖော်ကြပါစို့။

jsxfunction 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>;
}

အတိုကောက်ပုံစံကို သုံးနိုင်သည်။

jsxfunction 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>;
}