React တွင် radio များနှင့်အလုပ်လုပ်ခြင်း

radio radio များနှင့်အလုပ်လုပ်ခြင်းသည် ဥပမာ checkbox များနှင့်နှိုင်းယှဉ်ပါက အနည်းငယ်ကွာခြားပါသည်။ ပြဿနာမှာ radio အများအပြားတွင် state တစ်ခုတည်းရှိသော်လည်း value များမှာမတူညီကြခြင်းပင်။

ထို့ကြောင့် အလုပ်လုပ်ပုံမှာ အောက်ပါအတိုင်းဖြစ်သည်- radio button တစ်ခုစီ၏ value attribute တွင် ၎င်း၏တန်ဖိုးကိုရေးထည့်ပြီး၊ checked attribute တွင် state သည် တိကျသောတန်ဖိုးနှင့်ညီမညီစစ်ဆေးသည့် အထူးအခြေအနေတစ်ခုကို ထည့်သွင်းပေးရသည်။ ညီမျှပါက radio button ကိုအမှန်ခြစ်အဖြစ်သတ်မှတ်မည်၊ မညီမျှပါက အမှန်ခြစ်မထားဟုသတ်မှတ်မည်။

အောက်တွင်ဖော်ပြထားသည်မှာ အထက်ဖော်ပြပါအတိုင်းအကောင်အထည်ဖော်ခြင်းဖြစ်သည်-

function App() {
	const [value, setValue] = useState(1);
	
	function changeHandler(event) {
		setValue(event.target.value);
	}
	
	return <div>
		<input
			type="radio"
			name="radio"
			value="1"
			checked={value === '1' ? true : false}
			onChange={changeHandler}
		/>
		<input
			type="radio"
			name="radio"
			value="2"
			checked={value === '2' ? true : false}
			onChange={changeHandler}
		/>
		<input
			type="radio"
			name="radio"
			value="3"
			checked={value === '3' ? true : false}
			onChange={changeHandler}
		/>
	</div>
}

3 ခုသော radio button များပေးထားသည်။ စာပိုဒ်တစ်ခုပေးထားသည်။ ရွေးချယ်ထားသော radio button ၏တန်ဖိုးကို ထိုစာပိုဒ်အတွင်း ပေါ်စေရန် ပြုလုပ်ပါ။

Radio button များကို အသုံးပြု၍ သုံးစွဲသူအား ၎င်း၏အကြိုက်ဆုံး Programming Language ကိုမေးပါ။ ၎င်း၏ရွေးချယ်မှုကို စာပိုဒ်အတွင်း ထုတ်ပြပါ။ အကယ်၍ JavaScript ကိုရွေးချယ်ထားပါက သုံးစွဲသူအားချီးကျူးပါ။