React'те радио менен иштөө

radio radio менен иштөө бир аз айырмаланып турат, мисалы, ошол эле чекбокстордон. Маселе мында, бир нече радио үчүн бир эле стейт болот, бирок ар түрдүү value.

Ошондуктан иш төмөнкүдөй жүргүзүлөт: ар бир радио баскычтын value атрибутуна өзүнүн мааниси жазылат, ал эми checked атрибутуна - стейт белгилүү бир мааниге барабарбы же жокпу текшерген атайын шарт. Эгерде барабар болсо - радио баскыч белгиленет, ал эми барабар болбосо - белгиленбей калат.

Силерге төмөндө сүрөттөлгөн нерсенин ишке ашырылышы:

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