React-та radio-мен жұмыс істеу

radio radio-мен жұмыс істеу біршама ерекшеленеді, мысалы, сол checkbox-тармен салыстырғанда. Мәселе мынада, bірнеше radio-ның бірдей стейті болады, бірақ әртүрлі value.

Сондықтан жұмыс келесідей жүреді: әрбір radio-батырмасына value атрибутына өз мәнін жазады, ал checked атрибутына - стейт белгілі бір мәнге тең екенін тексеретін арнайы шарт орналастырады. Егер тең болса - radio-батырмасы белгіленген болады, ал егер тең болмаса - белгіленбейді.

Міне, сипатталғанның жүзеге асырылуы:

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