Value atributai select elemente React

Tarkime, kad dabar mūsų option taguose yra value atributai:

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

Tokiu atveju, dėl value atributų buvimo, į būseną (state) pateks būtent jų reikšmės, o ne option tagų tekstai. Galima tuo įsitikinti atvaizduojant pasirinkimo rezultatą paragrafe:

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>
			jūsų pasirinkimas: {value}
		</p>
	</div>;
}

Atskirti option tekstą ir jo reikšmę gali būti patogu: tagų tekstą galime keisti kaip norime, tuo tarpu mūsų skripte pasirinkimo rezultatas bus apdorojamas pagal value atributo reikšmę, kuri išliks nepakitusi.

Žiūrėkite pavyzdį:

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' && 'jūs pasirinkote pirmą punktą'}
			{value === '2' && 'jūs pasirinkote antrą punktą'}
			{value === '3' && 'jūs pasirinkote trečią punktą'}
		</p>
	</div>;
}

Dabar, jei pakeisime option tagų tekstus, skripto veikimas nesutriks - juk jis pririštas prie value atributo reikšmės.

Naudodami išskleidžiamąjį sąrašą, pasiūlykite vartotojui pasirinkti, kuriai amžiaus grupei jis priklauso: nuo 0 iki 12 metų, nuo 13 iki 17, nuo 18 iki 25, arba vyresnis nei 25 metų.