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

Checkbox များနှင့် အလုပ်လုပ်ခြင်းသည်လည်း အလားတူ နိယာမအတိုင်းပင် ဖြစ်ပြီး၊ value attribute အစား checked attribute ကို ညွှန်ပြရပါမည်။ ဤ attribute သို့ true ကို ပေးသွင်းပါက checkbox ကို အမှန်ခြစ်ထားမည် ဖြစ်ပြီး false ပေးသွင်းပါက အမှန်ခြစ်ထားမည် မဟုတ်ပါ။

function App() {
	return <div>
		<input type="checkbox" checked={true}  /> အမှန်ခြစ်ထားသည်
		<input type="checkbox" checked={false} /> အမှန်မခြစ်ထားပါ
	</div>;
}

ပုံမှန်အားဖြင့် checked attribute သို့ ယုတ္တိတန်သော တန်ဖိုးပါရှိသည့် state ကို ပေးသွင်းပါသည်။

function App() {
	const [checked, setChecked] = useState(true);
	
	return <div>
		<input type="checkbox" checked={checked} />
	</div>;
}

Input များနှင့် အလုပ်လုပ်သည့်အခါ ကဲ့သို့ပင်၊ checked attribute ၏တန်ဖိုးကို ခိုင်မာစွာ သတ်မှတ်ထားပါက - checkbox ၏အခြေအနေကို ပြောင်းလဲ၍ မရပါ။ အောက်ပါနည်းအတိုင်း အလုပ်လုပ်နိုင်ရန်အတွက် checkbox ပြောင်းလဲသည့်အခါ ၎င်း၏ state ကို ၎င်း၏ ဆန့်ကျင်ဘက်တန်ဖိုးသို့ ပြောင်းလဲပေးရပါမည်။

function App() {
	const [checked, setChecked] = useState(true);
	
	function handleChange() {
		setChecked(!checked); // state ကို ပြောင်းပြန်လှန်သည်
	}
	
	return <div>
		<input type="checkbox" checked={checked} onChange={handleChange} />
	</div>;
}

အောက်ပါအတိုင်း ရိုးရှင်းအောင် ပြုလုပ်နိုင်ပါသည်။

function App() {
	const [checked, setChecked] = useState(true);
	
	return <div>
		<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
	</div>;
}

Ternary operator ကိုသုံး၍ checkbox ၏အခြေအနေကို စာပိုဒ်တစ်ခုအတွင်း ထုတ်ပြကြည့်ရအောင်။

function App() {
	const [checked, setChecked] = useState(true);
	
	return <div>
		<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
		<p>အခြေအနေ: {checked ? 'အမှန်ခြစ်ထားသည်' : 'အမှန်မခြစ်ထားပါ'}</p>
	</div>;
}

Checkbox တစ်ခု၊ ခလုတ်တစ်ခုနှင့် စာပိုဒ်တစ်ခု ရှိသည်။ ခလုတ်ကို နှိပ်သည့်အခါ၊ checkbox ကို အမှန်ခြစ်ထားပါက စာပိုဒ်အတွင်း အသုံးပြုသူကို ကြိုဆိုသည့် စာသားကို ထုတ်ပြပါ။ အမှန်မခြစ်ထားပါက နှုတ်ဆက်သည့် စာသားကို ထုတ်ပြပါ။

Checkbox သုံးခုကို အသုံးပြု၍ အသုံးပြုသူအား သူသိသော ဘာသာစကားများကို ရွေးချယ်ခိုင်းပါ - html, css နှင့် js။ တစ်ခုချင်းစီအတွက် ရွေးချယ်မှု ရလဒ်ကို သီးခြားစာပိုဒ်များအတွင်း ထုတ်ပြပါ။