Darbas su radio mygtukais React

Darbas su radio radio mygtukais šiek tiek skiriasi, pavyzdžiui, nuo tų pačių žymimųjų langelių. Problema ta, kad kelios radio mygtukai turės tą pačią būseną, bet skirtingas value reikšmes.

Todėl darbas vyksta taip: kiekvienam radio mygtukui į value atributą įrašoma jo reikšmė, o į checked atributą - speciali sąlyga, kuri tikrina, ar būsena lygi tam tikrai reikšmei. Jei lygi - radio mygtukas bus pažymėtas, o jei ne lygi - bus nepažymėtas.

Štai aprašytojo įgyvendinimas:

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