Atributi value v selektu v Reactu

Naj imajo zdaj v oznakah option atribute value:

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

V tem primeru bodo zaradi prisotnosti atributov value v stanje prišle njihove vrednosti, ne pa besedila oznak option. To lahko preverimo z izpisom izbire v odstavek:

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

Ločevanje besedila option in njegove vrednosti je lahko priročno: besedilo oznake lahko spreminjamo po želji, medtem ko se bo v našem skriptu rezultat izbire obdeloval glede na vrednost atributa value, ki bo ostal nespremenjen.

Oglejte si 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' && 'izbrali ste prvo možnost'}
			{value === '2' && 'izbrali ste drugo možnost'}
			{value === '3' && 'izbrali ste tretjo možnost'}
		</p>
	</div>;
}

Če zdaj spremenimo besedila oznak option, delovanje skripta ne bo moteno - saj je povezano z vrednostjo atributa value.

S pomočjo spustnega seznama ponudite uporabniku, da izbere kateri starostni skupini pripada: od 0 do 12 let, od 13 do 17, od 18 do 25, ali starejši od 25 let.