Value-attribut i select i React

Låt oss nu säga att vi i taggarna option har attributen value:

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

I det här fallet, på grund av närvaron av attributen value, kommer det att vara deras värden som hamnar i state, inte texten i taggarna option. Vi kan bekräfta detta genom att skriva ut valresultatet i ett stycke:

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

Att separera texten i option och dess värde kan vara bekvämt: vi kan ändra texten i taggen som vi vill, samtidigt som resultatet av valet i vårt skript kommer att behandlas enligt värdet på attributet value, som förblir oförändrat.

Se exemplet:

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 valde det första alternativet'}
      {value === '2' && 'du valde det andra alternativet'}
      {value === '3' && 'du valde det tredje alternativet'}
    </p>
  </div>;
}

Om vi nu ändrar texterna i taggarna option, kommer skriptets funktion inte att störas - eftersom det är kopplat till värdet på attributet value.