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

radio radio များနှင့်အလုပ်လုပ်ခြင်းသည် ဥပမာ checkbox များနှင့်နှိုင်းယှဉ်ပါက အနည်းငယ်ကွာခြားပါသည်။ ပြဿနာမှာ radio အများအပြားတွင် state တစ်ခုတည်းရှိသော်လည်း value များမှာမတူညီကြခြင်းပင်။

ထို့ကြောင့် အလုပ်လုပ်ပုံမှာ အောက်ပါအတိုင်းဖြစ်သည်- radio button တစ်ခုစီ၏ value attribute တွင် ၎င်း၏တန်ဖိုးကိုရေးထည့်ပြီး၊ checked attribute တွင် state သည် တိကျသောတန်ဖိုးနှင့်ညီမညီစစ်ဆေးသည့် အထူးအခြေအနေတစ်ခုကို ထည့်သွင်းပေးရသည်။ ညီမျှပါက radio button ကိုအမှန်ခြစ်အဖြစ်သတ်မှတ်မည်၊ မညီမျှပါက အမှန်ခြစ်မထားဟုသတ်မှတ်မည်။

အောက်တွင်ဖော်ပြထားသည်မှာ အထက်ဖော်ပြပါအတိုင်းအကောင်အထည်ဖော်ခြင်းဖြစ်သည်-

jsxfunction App() {
  const [value, setValue] = useState(1);
  
  function changeHandler(event) {
    setValue(event.target.value);
  }
  
  return <div>
    <input
      type="radio"
      name="radio"
      value="1"
      checked={value === '1' ? true : false}
      onChange={changeHandler}
    />
    <input
      type="radio"
      name="radio"
      value="2"
      checked={value === '2' ? true : false}
      onChange={changeHandler}
    />
    <input
      type="radio"
      name="radio"
      value="3"
      checked={value === '3' ? true : false}
      onChange={changeHandler}
    />
  </div>
}