React တွင် Input များနှင့် အလုပ်လုပ်ခြင်း

React တွင် input များနှင့် အလုပ်လုပ်ခြင်းသည် state များကို အသုံးပြု၍ ဖြစ်သည်။ input တစ်ခုစီကို ၎င်း၏ value ပါဝင်သည့် သီးသန့် state တစ်ခု သတ်မှတ်ပေးရသည်။

ဥပမာတစ်ခုကြည့်ကြစို့။ ကျွန်ုပ်တို့တွင် input တစ်ခုရှိသည်ဆိုပါစို့။

jsxfunction App() {
  return <div>
    <input />
  </div>;
}

ကျွန်ုပ်တို့တွင် state တစ်ခုလည်း ရှိသည်ဆိုပါစို့။

jsxfunction App() {
  const [value, setValue] = useState('text');
  
  return <div>
    <input />
  </div>;
}

input ၏ value attribute သို့ ကျွန်ုပ်တို့၏ state ကို ချိတ်ဆက်ကြပါစို့။

jsxfunction App() {
  const [value, setValue] = useState('text');
  
  return <div>
    <input value={value} />
  </div>;
}

�ိုသို့ဆိုလျှင် state ပြောင်းလဲသောအခါ input ၏စာသားသည်လည်း သက်ရောက်မှုရှိစွာ ပြောင်းလဲသွားမည်။

သို့သော် ဤသည်က စိတ်ဝင်စားဖွယ် ဘေးထွက်အကျိုးသက်ရောက်မှုတစ်ခုကို ပေးသည်။ ယခု ကုဒ်ကို browser တွင် စတင်အလုပ်လုပ်စဉ်တွင် input ထဲ၌ စာသားကို ပြောင်းလဲရန် မဖြစ်နိုင်တော့ပါ။ အဘယ်ကြောင့်ဆိုသော် စာသားရိုက်ထည့်သောအခါ value state သည် မပြောင်းလဲသောကြောင့်၊ input ထဲရှိ စာသားသည်လည်း မပြောင်းလဲသင့်ပါ။

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

ကျွန်ုပ်တို့၏ input ထဲသို့ စာသားရိုက်ထည့်နိုင်ရန် ပြုလုပ်ကြပါစို့။ ထိုသို့ပြုလုပ်ရန် state သည် input ၏လက်ရှိတန်ဖိုးသို့ ပြောင်းလဲသွားစေရန် လိုအပ်သည်။

စတင်ရန် input ပေါ်တွင် onChange event ကို ချိတ်ဆက်ရန် လိုအပ်သည်။

jsxfunction App() {
  const [value, setValue] = useState('text');
  
  return <div>
    <input value={value} onChange={handleChange} />
  </div>;
}

React ရှိ ဤ event သည် ပေါ့ပါးသော JS နှင့် နှိုင်းယှဉ်ပါက ကွဲပြားစွာ အလုပ်လုပ်သည်။ React တွင် ၎င်းသည် input ပြောင်းလဲသည်နှင့် တစ်ပြိုင်နက် အလုပ်လုပ်သည်။ ဆိုလိုသည်မှာ အက္ခရာတစ်လုံး ရိုက်ထည့်ခြင်း သို့မဟုတ် ဖျက်ခြင်းတိုင်းတွင် ဖြစ်သည်။

ယခု ကျွန်ုပ်တို့၏ event အတွက် handler ထည့်ကြပါစို့။

jsxfunction App() {
  const [value, setValue] = useState('text');
  
  function handleChange() {
    
  }
  
  return <div>
    <input value={value} onChange={handleChange} />
  </div>;
}

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

ပြဿနာမှာ ဤလုပ်ဆောင်ချက်၏ this သည် ကျွန်ုပ်တို့၏ input ကို ညွှန်ပြမည် မဟုတ်ပါ - ထိုသို့ဖြစ်ခြင်းသည် React ၏ ထူးခြားချက်တစ်ခုဖြစ်သည်။ element ကို ရရှိရန်၊ အဘယ်တွင် event ဖြစ်ပျက်ခဲ့သည်၊ ကျွန်ုပ်တို့သည် event.target ကို အသုံးပြုရန် လိုအပ်သည်။

jsxfunction App() {
  const [value, setValue] = useState('text');
  
  function handleChange(event) {
    console.log(event.target); // input ၏ DOM element သို့ လင့်ခ်
  }
  
  return <div>
    <input value={value} onChange={handleChange} />
  </div>;
}

event.target ကို အသုံးပြု၍ input ၏လက်ရှိ စာသားကို ထုတ်ပြကြပါစို့။

jsxfunction App() {
  const [value, setValue] = useState('text');
  
  function handleChange(event) {
    console.log(event.target.value); // input ၏လက်ရှိစာသား
  }
  
  return <div>
    <input value={value} onChange={handleChange} />
  </div>;
}

ယခု input ၏စာသားကို ကျွန်ုပ်တို့၏ state ထဲသို့ ရေးကြပါစို့။

jsxfunction App() {
  const [value, setValue] = useState('text');
  
  function handleChange(event) {
    setValue(event.target.value);
  }
  
  return <div>
    <input value={value} onChange={handleChange} />
  </div>;
}

ယခု ကျွန်ုပ်တို့သည် input ထဲသို့ စာသားရိုက်ထည့်နိုင်မည်။ ထိုသို့ဖြစ်စဉ်တွင် state value သည် အမြဲတမ်း input ၏လက်ရှိစာသားကို ပါဝင်ထားမည်။

ကျွန်ုပ်တို့သည် ဤအချက်ကို လွယ်ကူစွာ သေချာစေနိုင်သည်။ ကျွန်ုပ်တို့၏စာသား၏အကြောင်းအရာကို စာပိုဒ်တစ်ခုအတွင်း ထုတ်ပြကြပါစို့။ ဤအခြေအနေတွင် input ထဲသို့ စာသားရိုက်ထည့်သောအခါ ရိုက်ထည့်ထားသောစာသားသည် စာပိုဒ်အတွင်း အလိုအလျောက် ပေါ်လာမည်။

jsxfunction App() {
  const [value, setValue] = useState('');
  
  function handleChange(event) {
    setValue(event.target.value);
  }
  
  return <div>
    <input value={value} onChange={handleChange} />
    <p>စာသား: {value}</p>
  </div>;
}

အမည်မဲ့ မြှားလုပ်ဆောင်ချက်ဖြင့် ပိုမိုကျစ်လျစ်သောပုံစံသို့ ပြန်ရေးနိုင်သည်။

jsxfunction App() {
  const [value, setValue] = useState('');
  
  return <div>
    <input value={value} onChange={event => setValue(event.target.value)} />
    <p>စာသား: {value}</p>
  </div>;
}

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

ဤလုပ်ဆောင်ချက်များကို input တစ်ခုစီအတွက် လုပ်ဆောင်ရမည်။ ဆိုလိုသည်မှာ၊ သင့်တွင် input နှစ်ခုရှိပါက၊ သင့်တွင် state နှစ်ခုနှင့် onChange event အတွက် handler လုပ်ဆောင်ချက် နှစ်ခု ရှိမည်။