Lucrul cu radio în React

Lucrul cu radio radio diferă oarecum, de exemplu, de la aceiași checkbox-uri. Problema este că la mai multe radio-uri va fi aceeași stare, dar diferite value.

Prin urmare, lucrul se desfășoară în felul următor: fiecărui buton radio în atributul value își scrie valoarea sa, iar în atributul checked - o condiție specială, care verifică, dacă starea este egală cu o anumită valoare. Dacă este egal - butonul radio va deveni bifat, iar dacă nu este egal - va fi nebifat.

Iată implementarea descrisă:

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