Kufanya Kazi na Radio katika React

Kufanya kazi na radio radio inatofautiana kidogo, kwa mfano, kutoka kwa zile checkbox. Tatizo ni kwamba kwa radio nyingi zitakuwa na hali (state) moja, lakini value tofauti.

Kwa hivyo kazi hufanyika kama ifuatavyo: kila kitufe cha radio katika sifa value huandikwa thamani yake, na katika sifa checked - hali maalum, ambayo inakagua, kama hali (state) ni sawa na thamani fulani. Ikiwa ni sawa - kitufe cha radio kitachaguliwa, na ikiwa si sawa - hakitachaguliwa.

Hayo yanatekelezwa kama ifuatavyo:

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