Arbeta med radio i React

Att arbeta med radio radio skiljer sig något, till exempel, från samma checkboxar. Problemet är att flera radio kommer att ha samma tillstånd, men olika value.

Därför fungerar arbetet på följande sätt: varje radioknapp i attributet value skriver sitt värde, och i attributet checked - ett speciellt villkor som kontrollerar, är tillståndet lika med ett visst värde. Om lika blir radioknappen markerad, och om den inte är lika kommer den inte att vara markerad.

Här är implementationen av det beskrivna:

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