Reactda Selectda value Attributlari

Endi faraz qilaylik, option teglarida value attributlari mavjud:

function App() {
	return <div>
		<select>
			<option value="1">matn1</option>
			<option value="2">matn2</option>
			<option value="3">matn3</option>
		</select>
	</div>;
}

Bunday holatda, value attributlari mavjudligi sababli, statega aynan ularning qiymatlari tushadi, option teglarining matnlari emas. Buni isbotlash uchun tanlov natijasini paragrafda chiqarib ko'ramiz:

function App() {
	const [value, setValue] = useState('');
	
	return <div>
		<select value={value} onChange={(event) => setValue(event.target.value)}>
			<option value="1">matn1</option>
			<option value="2">matn2</option>
			<option value="3">matn3</option>
		</select>
		<p>
			sizning tanlovingiz: {value}
		</p>
	</div>;
}

option tegi matnini va uning qiymatini ajratib ishlatish qulay bo'lishi mumkin: teg matnini biz xohlaganimizcha o'zgartirishimiz mumkin, shu bilan birga skriptimizda tanlov natijasi value atributi qiymati bo'yicha qayta ishlanadi, bu esa o'zgarishsiz qoladi.

Misolnı ko'ring:

function App() {
	const [value, setValue] = useState('');
	
	return <div>
		<select value={value} onChange={event => setValue(event.target.value)}>
			<option value="1">matn1</option>
			<option value="2">matn2</option>
			<option value="3">matn3</option>
		</select>
		<p>
			{value === '1' && 'siz birinchi bandni tanladingiz'}
			{value === '2' && 'siz ikkinchi bandni tanladingiz'}
			{value === '3' && 'siz uchinchi bandni tanladingiz'}
		</p>
	</div>;
}

Endi agar biz option teglarining matnlarini o'zgartirsak, skript ishlash buzilmaydi - chunki u value atributi qiymatiga bog'langan.

Ochiladigan ro'yxat yordamida foydalanuvchiga qaysi yosh guruhga kirishini taklif qiling: 0 dan 12 yoshgacha, 13 dan 17 gacha, 18 dan 25 gacha, yoki 25 yoshdan katta.