Value-attribuutit select-elementissä Reactissa

Oletetaan nyt, että option -tageissa on value -attribuutit:

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

Tässä tapauksessa value -attribuuttien vuoksi stateen pääsevät juuri niiden arvot, eivät option -tagien tekstit. Voit varmistaa tämän tulostamalla valinnan tuloksen kappaleeseen:

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

option -tagin tekstin ja sen arvon erottaminen voi olla kätevää: tagin tekstiä voimme muuttaa miten haluamme, samalla kun skriptissämme valinnan tulos käsitellään value -attribuutin arvon perusteella, joka pysyy muuttumattomana.

Katso esimerkki:

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' && 'valitsit ensimmäisen vaihtoehdon'}
      {value === '2' && 'valitsit toisen vaihtoehdon'}
      {value === '3' && 'valitsit kolmannen vaihtoehdon'}
    </p>
  </div>;
}

Nyt, jos muutamme option -tagien tekstejä, skriptin toiminta ei häiriinny - koska se liittyy value -attribuutin arvoon.