JSX-এ ইভেন্ট সংযুক্তকরণ

আসুন এখন React-এ ইভেন্ট নিয়ে কাজ করা শিখি। উদাহরণস্বরূপ, আসুন একটি ব্লকে ক্লিক করলে কিছু টেক্সট সহ একটি alert প্রদর্শন করানো যাক।

ধরুন আমাদের একটি showMess ফাংশন আছে, যা একটি বার্তা সহ alert দেখায়, এবং HTML কোডে একটি বাটন আছে, যাতে ক্লিক করলে আমরা এই alertটি দেখতে চাই:

function App() {
	function showMess() {
		alert('hello');
	}
	
	return <div>
		<button>show</button>
	</div>;
}

আসুন আমাদের বাটনে onclick ইভেন্টটি সংযুক্ত করি যাতে এই ডিভে ক্লিক করলে showMess ফাংশনটি কার্যকর হয়। এর জন্য onClick অ্যাট্রিবিউটটি যোগ করতে হবে (অবশ্যই camelCase-এ, অর্থাৎ onClick, onclick নয়), এবং এতে সেই ফাংশনটি নির্দিষ্ট করতে হবে যা এই ইভেন্টে কার্যকর হবে:

function App() {
	function showMess() {
		alert('hello');
	}
	
	return <div>
		<button onClick={showMess}>show</button>
	</div>;
}

এইভাবেই ইভেন্ট নিয়ে কাজ করা হয়: একটি অ্যাট্রিবিউট যোগ করা হয় (উদাহরণস্বরূপ, onClick বা onFocus), অ্যাট্রিবিউটের মান হিসাবে সেই মেথডটি নির্দেশ করা হয় যা এই ইভেন্টে কল হবে।

নিম্নলিখিত কোডটি দেওয়া আছে:

function App() {
	function show1() {
		alert(1);
	}
	
	function show2() {
		alert(2);
	}
	
	return <div>
		<button>act1</button>
		<button>act2</button>
	</div>;
}

এটি এমনভাবে সেটআপ করুন যাতে প্রথম বাটনে ক্লিক করলে প্রথম ফাংশনটি কার্যকর হয়, এবং দ্বিতীয় বাটনে ক্লিক করলে দ্বিতীয় ফাংশনটি কার্যকর হয়।