Werken met radio in React

Werken met radio radio verschilt enigszins, bijvoorbeeld, van dezelfde checkboxes. Het probleem is dat meerdere radio's dezelfde state zullen hebben, maar verschillende value.

Daarom werkt het op de volgende manier: elke radioknop krijgt in het attribuut value zijn eigen waarde geschreven, en in het attribuut checked - een speciale voorwaarde die controleert, of de state gelijk is aan een bepaalde waarde. Als het gelijk is - wordt de radioknop aangevinkt, en als het niet gelijk is - wordt het niet aangevinkt.

Hier is de implementatie van het beschrevene:

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