React တွင် select များအတွင်း value attributes များ

ယခု ကျွန်ုပ်တို့၏ option tags များတွင် value attributes များ ရှိသည်ဆိုပါစို့:

function App() {
	return <div>
		<select>
			<option value="1">text1</option>
			<option value="2">text2</option>
			<option value="3">text3</option>
		</select>
	</div>;
}

ထိုသို့ဖြစ်လျှင် value attributes များ ရှိခြင်း၏ အကျိုးဆက်အနေဖြင့် state ထဲသို့ option tags များ၏ text များအစား ၎င်းတို့၏ 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}
		</p>
	</div>;
}

option ၏ text နှင့် ၎င်း၏ value ကို ခွဲခြားခြင်းသည် အဆင်ပြေစေနိုင်သည်: tag ၏ text ကို ကျွန်ုပ်တို့ နှစ်သက်သလို ပြောင်းလဲနိုင်ပြီး၊ ကျွန်ုပ်တို့၏ script အတွင်းတွင် ရွေးချယ်မှု၏ရလဒ်ကို value attribute ၏ value အရ ကိုင်တွယ်မည်ဖြစ်ကာ၊ ထို 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 tags များ၏ text များကို ပြောင်းလဲလျှင်ပင်၊ script ၏အလုပ်လုပ်ဆောင်မှု ပျက်ပြားမည် မဟုတ်ပါ။ အဘယ်ကြောင့်ဆိုသော် ၎င်းသည် value attribute ၏ value နှင့် ချိတ်ဆက်ထားခြင်းကြောင့် ဖြစ်သည်။

အောက်ဆွဲစာရင်း drop-down အသုံးပြု၍ သုံးစွဲသူအား မည်သည့်အသက်အပိုင်းအခြားအုပ်စုတွင် ပါဝင်သည်ကို ရွေးချယ်ရန် ကမ်းလှမ်းပါ: 0 မှ 12 နှစ်၊ 13 မှ 17၊ 18 မှ 25၊ သို့မဟုတ် 25 နှစ်ထက် ကြီးသူများ။