Атрибуты value в селекте в React
Пусть теперь у нас в тегах option
есть атрибуты value:
function App() {
return <div>
<select>
<option value="1">text1</option>
<option value="2">text2</option>
<option value="3">text3</option>
</select>
</div>;
}
В таком случае из-за наличия атрибутов value
в стейт будут попадать именно их значения,
а не тексты тегов option. Можно убедится
в этом, выведя результат выбора в абзац:
function 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, которые останется
неизменным.
Смотрите пример:
function 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.
С помощью выпадающего списка предложите пользователю
выбрать к какой возрастной группе он относится:
от 0 до 12 лет, от 13
до 17, от 18 до 25,
либо старше 25 лет.