value-Attribute in Selects in React

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

jsxfunction 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:

jsxfunction 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:

jsxfunction 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.