Vrednosti atributa value u select-u u React-u

Pretpostavimo sada da u tagovima option imamo atribute value:

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

U takvom slučaju, zbog prisustva atributa value, u state će upravo njihove vrednosti biti snimljene, a ne tekstovi tagova option. Možemo se uveriti u ovo, ispisavši rezultat izbora u paragraf:

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>
			vaš izbor: {value}
		</p>
	</div>;
}

Razdvajanje teksta option i njegove vrednosti može biti zgodno: tekst taga možemo menjati kako god želimo, dok će se u našem skriptu rezultat izbora obrađivati prema vrednosti atributa value, koji će ostati nepromenjen.

Pogledajte primer:

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' && 'izabrali ste prvu opciju'}
			{value === '2' && 'izabrali ste drugu opciju'}
			{value === '3' && 'izabrali ste treću opciju'}
		</p>
	</div>;
}

Sada, ako promenimo tekstove tagova option, rad skripte neće biti poremećen - jer je ona vezana za vrednost atributa value.

Pomoću padajuće liste ponudite korisniku da izabere kojoj starosnoj grupi pripada: od 0 do 12 godina, od 13 do 17, od 18 do 25, ili stariji od 25 godina.