Radio-ի հետ աշխատանքը React-ում

radio radio-ի հետ աշխատանքը որոշակիորեն տարբերվում է, օրինակ, նույնիսկ checkbox-ներից: Խնդիրը կայանում է նրանում, որ մի քանի radio-ների համար կլինի նույն state-ը, բայց տարբեր value-ներ:

Ուստի աշխատանքը կատարվում է հետևյալ կերպ. Յուրաքանչյուր ռադիոկոճակի համար value ատրիբուտում գրվում է իր արժեքը, իսկ checked ատրիբուտում - հատուկ պայման, որը ստուգում է, արդյոք state-ը հավասար է տվյալ արժեքին: Եթե հավասար է - ռադիոկոճակը կնշվի, իսկ եթե ոչ - կմնա չնշված:

Ահա նկարագրվածի իրականացումը.

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