Value-attributter i select i React

Lad os nu sige, at vi i option-tags har value-attributter:

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

I dette tilfælde, på grund af tilstedeværelsen af value-attributter, vil det være deres værdier, der kommer til at blive sat i state, og ikke teksterne fra option-tags. Du kan overbevise dig selv om dette ved at outputte valgresultatet til et afsnit:

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

Det kan være praktisk at adskille option-teksten og dens værdi: vi kan ændre tagets tekst som vi vil, samtidig med at valgresultatet i vores script vil blive behandlet efter værdien af value-attributten, som forbliver uændret.

Se eksemplet:

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 valgte første punkt'}
			{value === '2' && 'du valgte andet punkt'}
			{value === '3' && 'du valgte tredje punkt'}
		</p>
	</div>;
}

Hvis vi nu ændrer teksterne i option-tags, så vil scriptets funktion ikke blive forstyrret - fordi den er bundet til værdien af value-attributten.

Brug en dropdown-menu til at lade brugeren vælge hvilken aldersgruppe de tilhører: 0 til 12 år, 13 til 17, 18 til 25, eller ældre end 25 år.