ইভেন্টগুলি ইন্টারেক্টিভ এবং ডায়নামিক ইউজার ইন্টারফেস তৈরিতে গুরুত্বপূর্ণ ভূমিকা পালন করে React ৷ এই টিউটোরিয়ালে, আমরা কীভাবে ইভেন্টগুলি পরিচালনা করব React এবং ব্যবহারকারীর ক্রিয়াকলাপের কার্যকরভাবে প্রতিক্রিয়া জানাব।
JSX-এ ইভেন্ট হ্যান্ডলিং
React একটি সিন্থেটিক ইভেন্ট সিস্টেম সরবরাহ করে যা নেটিভ ব্রাউজার ইভেন্টগুলিকে মোড়ানো এবং বিভিন্ন ব্রাউজারে সেগুলিকে স্বাভাবিক করে। আমরা অ্যাট্রিবিউট ব্যবহার করে ইভেন্ট হ্যান্ডলারদের সরাসরি JSX উপাদানের সাথে সংযুক্ত করতে পারি onEventName ।
উদাহরণ:
function handleClick() {
console.log("Button clicked!");
}
<button onClick={handleClick}>Click Me</button>
ইভেন্ট হ্যান্ডলার এবং ইভেন্ট অবজেক্ট
যখন একটি ইভেন্ট ট্রিগার হয়, তখন React স্বয়ংক্রিয়ভাবে ইভেন্ট হ্যান্ডলার ফাংশনে একটি ইভেন্ট অবজেক্ট পাস করে। আমরা ইভেন্ট সম্পর্কে অতিরিক্ত তথ্য পেতে এই বস্তুটি অ্যাক্সেস করতে পারি, যেমন লক্ষ্য উপাদান, মাউস স্থানাঙ্ক ইত্যাদি।
উদাহরণ:
function handleMouseOver(event) {
console.log("Mouse coordinates:", event.clientX, event.clientY);
}
<div onMouseOver={handleMouseOver}>Hover over me</div>
বাইন্ডিং ইভেন্ট হ্যান্ডলার
ইভেন্ট হ্যান্ডলারদের প্রপস হিসাবে পাস করার সময়, তাদের উপাদান উদাহরণে আবদ্ধ করা গুরুত্বপূর্ণ। this এটি নিশ্চিত করে যে ইভেন্টটি ট্রিগার করার সময় সঠিক প্রেক্ষাপট বজায় রাখা হয়।
উদাহরণ:
class MyComponent extends React.Component {
handleClick() {
console.log("Button clicked!");
}
render() {
return <button onClick={this.handleClick.bind(this)}>Click Me</button>;
}
}
ইভেন্ট প্রচার এবং ডিফল্ট কর্ম প্রতিরোধ
React একটি সিন্থেটিক ইভেন্ট সিস্টেম ব্যবহার করে যা স্বয়ংক্রিয়ভাবে ইভেন্ট প্রচার পরিচালনা করে। ডিফল্ট ব্রাউজার আচরণ প্রতিরোধ করতে, যেমন ফর্ম জমা বা লিঙ্ক নেভিগেশন, আমরা event.preventDefault() পদ্ধতি কল করতে পারেন.
উদাহরণ:
function handleSubmit(event) {
event.preventDefault();
console.log("Form submitted!");
}
<form onSubmit={handleSubmit}>
<input type="text" />
<button type="submit">Submit</button>
</form>কীভাবে ইভেন্টগুলি পরিচালনা করতে হয় তা বোঝার মাধ্যমে React, আপনি ইন্টারেক্টিভ এবং প্রতিক্রিয়াশীল ইউজার ইন্টারফেস তৈরি করতে পারেন যা ব্যবহারকারীর ক্রিয়াকলাপে নির্বিঘ্নে প্রতিক্রিয়া জানায়
এখানে সাধারণ ইভেন্টগুলির একটি তালিকা রয়েছে৷ React
1. onClick: এই ঘটনাটি ঘটে যখন একটি উপাদান ক্লিক করা হয়।
উদাহরণ:
<button onClick={handleClick}>Click Here</button> 2. onChange: এই ঘটনাটি ঘটে যখন একটি ইনপুট উপাদানের মান(ইনপুট, নির্বাচন, টেক্সটেরিয়া) পরিবর্তিত হয়।
উদাহরণ:
<input type="text" onChange={handleChange} /> 3. onSubmit: এই ঘটনাটি ঘটে যখন একটি ফর্ম জমা দেওয়া হয়। উদাহরণ:
<form onSubmit={handleSubmit}>
<input type="text" />
<button type="submit">Submit</button>
</form> 4. onMouseEnter: এই ঘটনাটি ঘটে যখন মাউস পয়েন্টার একটি উপাদান প্রবেশ করে।
উদাহরণ:
<div onMouseEnter={handleMouseEnter}>Mouse Enter Here</div> 5. onMouseLeave: এই ঘটনাটি ঘটে যখন মাউস পয়েন্টার একটি উপাদান ছেড়ে যায়।
উদাহরণ:
<div onMouseLeave={handleMouseLeave}>Mouse Leave Here</div> 6. onKeyDown: একটি কী চাপলে এই ঘটনা ঘটে।
উদাহরণ:
<input type="text" onKeyDown={handleKeyDown} /> 7. onKeyUp: এই ঘটনাটি ঘটে যখন একটি কী প্রকাশ করা হয়।
উদাহরণ:
<input type="text" onKeyUp={handleKeyUp} /> 8. onFocus: এই ঘটনাটি ঘটে যখন একটি উপাদান ফোকাস গ্রহণ করে।
উদাহরণ:
<input type="text" onFocus={handleFocus} /> 9. onBlur: এই ঘটনাটি ঘটে যখন একটি উপাদান ফোকাস হারায়।
উদাহরণ:
<input type="text" onBlur={handleBlur} /> 10. onScroll: এই ঘটনাটি ঘটে যখন একটি উপাদান স্ক্রোল করা হয়।
উদাহরণ:
<div onScroll={handleScroll}>Scrollable Content</div>
এগুলি সাধারণ ঘটনার কিছু উদাহরণ মাত্র React । React আপনি এই ইভেন্টগুলি ব্যবহার করতে পারেন বা আপনার অ্যাপ্লিকেশনে আপনার প্রয়োজন অনুযায়ী কাস্টম ইভেন্ট তৈরি করতে পারেন ।