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

checkbox के साथ काम करना भी इसी तरह के सिद्धांत पर किया जाता है, केवल value विशेषता के बजाय हम checked विशेषता निर्दिष्ट करते हैं। यदि इस विशेषता में true पास किया जाए - तो checkbox चेक होगा, और यदि false - चेक नहीं होगा:

jsxfunction App() {
  return <div>
    <input type="checkbox" checked={true}  /> चेक किया गया
    <input type="checkbox" checked={false} /> चेक नहीं किया गया
  </div>;
}

आमतौर पर checked विशेषता में एक state पास किया जाता है, जिसमें एक बूलियन मान होता है:

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  return <div>
    <input type="checkbox" checked={checked} />
  </div>;
}

इनपुट के साथ काम करने की तरह ही, यदि checked विशेषता का मान कड़ाई से सेट कर दिया जाए - checkbox की स्थिति को बदला नहीं जा सकेगा। सही ढंग से काम करने के लिए, checkbox के बदलने पर इसकी state को इसके विपरीत मान में बदलेंगे:

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  function handleChange() {
    setChecked(!checked); // state को उल्टा करते हैं
  }
  
  return <div>
    <input type="checkbox" checked={checked} onChange={handleChange} />
  </div>;
}

हम इसे सरल बना सकते हैं:

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  return <div>
    <input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
  </div>;
}

आइए टर्नरी ऑपरेटर का उपयोग करके checkbox की स्थिति को एक पैराग्राफ में प्रदर्शित करते हैं:

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  return <div>
    <input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
    <p>स्थिति: {checked ? 'चेक किया गया' : 'चेक नहीं किया गया'}</p>
  </div>;
}