Value-attribut i select i React

Låt oss nu säga att vi i taggarna option har attributen value:

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

I det här fallet, på grund av närvaron av attributen value, kommer det att vara deras värden som hamnar i state, inte texten i taggarna option. Vi kan bekräfta detta genom att skriva ut valresultatet i ett stycke:

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>
			ditt val: {value}
		</p>
	</div>;
}

Att separera texten i option och dess värde kan vara bekvämt: vi kan ändra texten i taggen som vi vill, samtidigt som resultatet av valet i vårt skript kommer att behandlas enligt värdet på attributet value, som förblir oförändrat.

Se exemplet:

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' && 'du valde det första alternativet'}
			{value === '2' && 'du valde det andra alternativet'}
			{value === '3' && 'du valde det tredje alternativet'}
		</p>
	</div>;
}

Om vi nu ändrar texterna i taggarna option, kommer skriptets funktion inte att störas - eftersom det är kopplat till värdet på attributet value.

Med hjälp av en rullgardinsmeny, låt användaren välja vilken åldersgrupp de tillhör: från 0 till 12 år, från 13 till 17, från 18 till 25, eller äldre än 25 år.