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

आइए अब ड्रॉप-डाउन सूचियों select पर काम करते हैं। उनके साथ काम करना इनपुट और चेकबॉक्स के साथ काम करने से व्यावहारिक रूप से अलग नहीं है।

मान लीजिए कि हमारे पास इस प्रकार का एक चयन है:

function App() {
	return <div>
		<select>
			<option>text1</option>
			<option>text2</option>
			<option>text3</option>
			<option>text4</option>
		</select>
	</div>;
}

आइए इसे React के माध्यम से कार्यात्मक बनाएं:

function App() {
	const [value, setValue] = useState('');
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	return <div>
		<select value={value} onChange={handleChange}>
			<option>text1</option>
			<option>text2</option>
			<option>text3</option>
			<option>text4</option>
		</select>
		<p>
			आपकी पसंद: {value}
		</p>
	</div>;
}

शहरों की एक ड्रॉप-डाउन सूची बनाएं। एक पैराग्राफ भी बनाएं जिसमें उपयोगकर्ता की पसंद प्रदर्शित की जाएगी।