React හි radio සමඟ වැඩ කිරීම

radio radio සමඟ වැඩ කිරීම යම් තරමකින් වෙනස් වේ, උදාහරණයක් ලෙස, එම checkbox වලට සාපේක්ෂව. ගැටලුව වන්නේ radio කිහිපයකට එකම state එකක් තිබෙන නමුත් විවිධ value ඇති වීමයි.

එම නිසා වැඩ කටයුතු සිදු වන්නේ පහත ආකාරයටයි: සෑම රේඩියෝ බොත්තමකටම value ගුණාංගය තුළ එහිම අගය ලියාපදිංචි කර, checked ගුණාංගය තුළ - විශේෂ කොන්දේසියක් ලියා, එය පරීක්ෂා කරයි, state අගය නිශ්චිත අගයකට සමාන දැයි. එය සමාන නම් - රේඩියෝ බොත්තම සලකුණු කරනු ඇත, සමාන නොවේ නම් - සලකුණු නොකරනු ඇත.

විස්තර කර ඇති දේ ක්‍රියාත්මක කිරීම මෙහි දැක්වේ:

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