Атрибути 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 години.