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

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

আসুন একটি অনুচ্ছেদে 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। প্রতিটি ভাষার জন্য নির্বাচনের ফলাফল আলাদা আলাদা অনুচ্ছেদে প্রদর্শন করুন।