Darbība ar radio React

Darbība ar radio radio nedaudz atšķiras, piemēram, no tiem pašiem checkbox. Problēma ir tā, ka vairākiem radio būs viens un tas pats stāvoklis, bet dažādas value.

Tāpēc darbs notiek šādi: katram radio pogai atribūtā value ieraksta savu vērtību, bet atribūtā checked - īpašs nosacījums, kas pārbauda, vai stāvoklis ir vienāds ar noteiktu vērtību. Ja vienāds - radio poga kļūs atzīmēta, bet ja nav vienāds - nebūs atzīmēta.

Šeit ir iepriekš aprakstītā implementācija:

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