Raadiotegelemetega töötamine Reactis

Töötamine radio radio elementidega erineb mõnevõrra, näiteks sama tüüpi märkeruutudest. Probleem on selles, et mitu radiotelemet jagavad üht ja sama staatust, kuid neil on erinevad value väärtused.

Seetõttu toimub töötamine järgmiselt: igale raadionupule kirjutatakse value atribuuti oma väärtus, ja checked atribuuti - spetsiaalne tingimus, mis kontrollib, kas staatus võrdub kindla väärtusega. Kui võrdub - muutub raadionupp märgituks, ja kui ei võrdu, jääb märkimata.

Siin on kirjeldatud meetodi realiseering:

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