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>;
}

ইনপুটগুলির সাথে কাজ করার মতোই, যদি 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>;
}

আসুন একটি অনুচ্ছেদে checkbox-এর অবস্থা প্রদর্শন করি, টারনারি অপারেটর ব্যবহার করে:

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  return <div>
    <input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
    <p>অবস্থা: {checked ? 'চেক করা' : 'চেক করা নেই'}</p>
  </div>;
}