Атрибути value в селект в React

Нека сега в таговете option има атрибути value:

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

В такъв случай, поради наличието на атрибути value, в състоянието ще попадат именно техните стойности, а не текстовете на таговете option. Може да се убедите в това, като изведете резултата от избора в параграф:

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}
    </p>
  </div>;
}

Разделянето на текста option и неговата стойност може да бъде удобно: текста на тага можем да променяме както си желаем, като в същото време в нашия скрипт резултатът от избора ще се обработва според стойността на атрибута value, която ще остане непроменена.

Вижте пример:

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' && 'избрахте първия пункт'}
      {value === '2' && 'избрахте втория пункт'}
      {value === '3' && 'избрахте третия пункт'}
    </p>
  </div>;
}

Сега, ако променим текстовете на таговете option, работата на скрипта няма да се наруши - тъй като тя е свързана със стойността на атрибута value.