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

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

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

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

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

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

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

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

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

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

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