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

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

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

यहाँ वर्णित का कार्यान्वयन है:

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

3 radio बटन दिए गए हैं। एक पैराग्राफ दिया गया है। ऐसा करें कि चयनित radio बटन का मान इस पैराग्राफ में प्रदर्शित हो।

radio बटनों की सहायता से उपयोगकर्ता से उसकी पसंदीदा प्रोग्रामिंग भाषा पूछें। उसके चयन को एक पैराग्राफ में प्रदर्शित करें। यदि JavaScript भाषा चुनी गई है, तो उपयोगकर्ता की प्रशंसा करें।