Puna me radio në React

Puna me radio radio ndryshon disi, për shembull, nga ato të checkbox-ave. Problemi është se disa radio do të kenë të njëjtën state, por value të ndryshme.

Prandaj puna bëhet në mënyrën e mëposhtme: çdo butoni radio në atributin value shkruajnë vlerën e tyre, dhe në atributin checked - një kusht të veçantë, i cili kontrollon, nëse state është i barabartë me një vlerë të caktuar. Nëse është i barabartë - butoni radio do të shënohet, dhe nëse nuk është i barabartë - nuk do të shënohet.

Këtu është implementimi i përshkruar:

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