Value-attributter i select i React

La oss nå si at vi i taggene option har attributtene value:

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

I et slikt tilfelle, på grunn av tilstedeværelsen av attributtene value, vil det være deres verdier som havner i staten, og ikke tekstene i taggene option. Du kan overbevise deg selv om dette ved å skrive ut valgresultatet i et avsnitt:

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

Å skille teksten option og dens verdi kan være praktisk: teksten i taggen kan vi endre som vi vil, mens i skriptet vårt vil valgresultatet bli behandlet etter verdien til attributtet value, som forblir uendret.

Se eksempel:

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

Nå, hvis vi endrer tekstene i taggene option, vil ikke skriptets funksjon bli forstyrret - fordi den er knyttet til verdien av attributtet value.