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

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

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

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

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

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

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

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

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

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

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

एक checkbox, एक बटन और एक पैराग्राफ दिया गया है। बटन पर क्लिक करने पर, यदि checkbox चेक किया गया है, तो पैराग्राफ में उपयोगकर्ता के लिए अभिवादन पाठ दिखाएं, और यदि चेक नहीं किया गया है - तो विदाई पाठ दिखाएं।

तीन checkboxes की मदद से उपयोगकर्ता को वे भाषाएं चुनने के लिए कहें जो वह जानता/जानती है: html, css और js। प्रत्येक भाषा के लिए चयन का परिणाम अलग-अलग पैराग्राफ में दिखाएं।