React-এ রেডিওর সাথে কাজ

রেডিও radio-এর সাথে কাজ কিছুটা আলাদা, উদাহরণস্বরূপ, একই চেকবক্সগুলির থেকে। সমস্যা হল কয়েকটি রেডিওর জন্য একই স্টেট থাকবে, কিন্তু ভিন্ন value।

সেজন্য কাজ নিম্নলিখিতভাবে করা হয়: প্রতিটি রেডিও বাটনে value অ্যাট্রিবিউটে তার নিজস্ব মান লেখা হয়, এবং checked অ্যাট্রিবিউটে - একটি বিশেষ শর্ত যা পরীক্ষা করে, স্টেটটি একটি নির্দিষ্ট মানের সমান কিনা। যদি সমান হয় - রেডিও বাটনটি চিহ্নিত হবে, আর যদি সমান না হয় - অচিহ্নিত থাকবে।

বর্ণিতটির বাস্তবায়ন এখানে:

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টি রেডিও বাটন দেওয়া আছে। একটি অনুচ্ছেদ দেওয়া আছে। এমন করুন যে নির্বাচিত রেডিও বাটনের মান এই অনুচ্ছেদে প্রদর্শিত হয়।

রেডিও বাটনের সাহায্যে ব্যবহারকারীর কাছ থেকে জিজ্ঞাসা করুন তার প্রিয় প্রোগ্রামিং ভাষা। তার পছন্দটি অনুচ্ছেদে প্রদর্শন করুন। যদি JavaScript ভাষা নির্বাচন করা হয়, ব্যবহারকারীকে প্রশংসা করুন।