React-এ সিলেক্টে value অ্যাট্রিবিউট

এখন ধরুন যে option ট্যাগগুলিতে value অ্যাট্রিবিউট রয়েছে:

function App() {
	return <div>
		<select>
			<option value="1">text1</option>
			<option value="2">text2</option>
			<option value="3">text3</option>
		</select>
	</div>;
}

এই ক্ষেত্রে, value অ্যাট্রিবিউট থাকার কারণে, স্টেটে option ট্যাগের টেক্সট নয় বরং তাদের মানগুলি যাবে। আপনি নির্বাচনের ফলাফলটি একটি অনুচ্ছেদে আউটপুট করে এটি যাচাই করতে পারেন:

function App() {
	const [value, setValue] = useState('');
	
	return <div>
		<select value={value} onChange={(event) => setValue(event.target.value)}>
			<option value="1">text1</option>
			<option value="2">text2</option>
			<option value="3">text3</option>
		</select>
		<p>
			আপনার পছন্দ: {value}
		</p>
	</div>;
}

option-এর টেক্সট এবং এর মান আলাদা করা সুবিধাজনক হতে পারে: আমরা ট্যাগের টেক্সটটি ইচ্ছামতো পরিবর্তন করতে পারি, একই সাথে আমাদের স্ক্রিপ্টে value অ্যাট্রিবিউটের মান অনুসারে নির্বাচনের ফলাফল প্রক্রিয়া করা হবে, যা অপরিবর্তিত থাকবে।

উদাহরণ দেখুন:

function App() {
	const [value, setValue] = useState('');
	
	return <div>
		<select value={value} onChange={event => setValue(event.target.value)}>
			<option value="1">text1</option>
			<option value="2">text2</option>
			<option value="3">text3</option>
		</select>
		<p>
			{value === '1' && 'আপনি প্রথম আইটেম পছন্দ করেছেন'}
			{value === '2' && 'আপনি দ্বিতীয় আইটেম পছন্দ করেছেন'}
			{value === '3' && 'আপনি তৃতীয় আইটেম পছন্দ করেছেন'}
		</p>
	</div>;
}

এখন, আমরা যদি option ট্যাগের টেক্সট পরিবর্তন করি, তবে স্ক্রিপ্টের কাজ বিঘ্নিত হবে না - কারণ এটি value অ্যাট্রিবিউটের মানের সাথে সংযুক্ত।

ড্রপ-ডাউন তালিকা ব্যবহার করে ব্যবহারকারীকে তার বয়সের গ্রুপ নির্বাচন করার প্রস্তাব দিন: 0 থেকে 12 বছর, 13 থেকে 17, 18 থেকে 25, অথবা 25 বছরের বেশি।