React में radio के साथ काम करना

radio radio के साथ काम करना कुछ अलग है, उदाहरण के लिए, उन्हीं चेकबॉक्सों से। समस्या यह है कि कई radio का एक ही state होगा, लेकिन अलग-अलग value।

इसलिए काम निम्नलिखित तरीके से होता है: प्रत्येक radio बटन में value विशेषता में उसका अपना मान लिखा जाता है, और checked विशेषता में - एक विशेष शर्त जो जांचती है, क्या state किसी特定 मान के बराबर है। यदि बराबर है - 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>
}