Τα χαρακτηριστικά value σε select στο React

Ας υποθέσουμε τώρα ότι στις ετικέτες 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, στο state θα πέφτουν ακριβώς οι τιμές τους, και όχι τα κείμενα των ετικετών 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 και της τιμής του μπορεί να είναι βολικός: το κείμενο της ετικέτας μπορούμε να αλλάξουμε όπως θέλουμε, ενώ στο script μας το αποτέλεσμα της επιλογής θα επεξεργάζεται βάσει της τιμής του χαρακτηριστικού 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, η λειτουργία του script δεν θα διαταραχθεί - αφού είναι συνδεδεμένη με την τιμή του χαρακτηριστικού value.

Με τη βοήθεια μιας αναπτυσσόμενης λίστας, προτείνετε στον χρήστη να επιλέξει σε ποια ηλικιακή ομάδα ανήκει: από 0 έως 12 ετών, από 13 έως 17, από 18 έως 25, ή άνω των 25 ετών.