value-Attribute in Selects in React

Nehmen wir nun an, dass in den option-Tags value-Attribute vorhanden sind:

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

In diesem Fall werden aufgrund der vorhandenen value-Attribute deren Werte in den State übernommen, und nicht die Texte der option-Tags. Man kann sich davon überzeugen, indem man das Auswahlergenis in einen Absatz ausgibt:

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

Den Text des option-Tags und seinen Wert zu trennen, kann praktisch sein: Den Text des Tags können wir nach Belieben ändern, während in unserem Skript das Auswahlergenis über den Wert des value-Attributs verarbeitet wird, der unverändert bleibt.

Sehen Sie sich das Beispiel an:

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' && 'Sie haben den ersten Punkt gewählt'}
			{value === '2' && 'Sie haben den zweiten Punkt gewählt'}
			{value === '3' && 'Sie haben den dritten Punkt gewählt'}
		</p>
	</div>;
}

Wenn wir nun die Texte der option-Tags ändern, wird die Funktionsweise des Skripts nicht beeinträchtigt - denn sie ist an den Wert des value-Attributs gebunden.

Lassen Sie den Benutzer mithilfe einer Dropdown-Liste auswählen, zu welcher Altersgruppe er gehört: von 0 bis 12 Jahre, von 13 bis 17, von 18 bis 25, oder älter als 25 Jahre.