Атрибутҳои value дар select дар 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 сол.