React-тағы select-те value атрибуттары

Енді бізде 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 жасқа дейін.