Riot.js এ ইভেন্ট পরিচালনা (যেমন click, input, submit ইত্যাদি) খুবই সহজ। Riot.js-এ, আপনি কম্পোনেন্টের HTML অংশে ইভেন্টের সাথে সংযুক্ত onclick, oninput, onsubmit এর মতো ইভেন্ট হ্যান্ডলার ব্যবহার করতে পারেন এবং এগুলিকে কম্পোনেন্টের স্ক্রিপ্ট অংশে ম্যানেজ করতে পারেন।
Riot.js এ ইভেন্ট হ্যান্ডলিং:
Riot.js এ ইভেন্ট হ্যান্ডলিং করার জন্য সাধারণত onclick, oninput, onsubmit ইভেন্টগুলির জন্য ফাংশন ডিফাইন করা হয় এবং সেই ফাংশনটি HTML এর মধ্যে যুক্ত করা হয়।
উদাহরণ 1: Click ইভেন্ট
<!-- ClickEvent.riot -->
<click-event>
<button onclick={handleClick}>Click Me!</button>
<p>{message}</p>
<script>
export default {
onMounted() {
this.message = "Button not clicked yet.";
},
handleClick() {
this.message = "Button clicked!";
}
}
</script>
</click-event>
এখানে, button ট্যাগের onclick ইভেন্ট হ্যান্ডলারের মাধ্যমে handleClick ফাংশন কল করা হয়েছে। যখন ব্যবহারকারী বাটনটি ক্লিক করবে, তখন message পরিবর্তিত হবে এবং UI তে সেই বার্তা দেখানো হবে।
উদাহরণ 2: Input ইভেন্ট (Input Field থেকে ডেটা নেয়া)
<!-- InputEvent.riot -->
<input-event>
<input type="text" oninput={updateMessage} placeholder="Type something">
<p>Input: {inputText}</p>
<script>
export default {
onMounted() {
this.inputText = '';
},
updateMessage(e) {
this.inputText = e.target.value;
}
}
</script>
</input-event>
এখানে, input ট্যাগের oninput ইভেন্ট হ্যান্ডলার ব্যবহার করা হয়েছে, যা ইনপুট ফিল্ডে টাইপ করা টেক্সটটি ধরবে এবং inputText প্রপার্টিতে সেট করবে। এর মাধ্যমে, আপনি ব্যবহারকারীর ইনপুট ফিল্ডের মান দেখতে পাবেন।
উদাহরণ 3: Submit ইভেন্ট (ফর্ম সাবমিট)
<!-- SubmitEvent.riot -->
<submit-event>
<form onsubmit={handleSubmit}>
<input type="text" ref="nameInput" placeholder="Enter your name">
<button type="submit">Submit</button>
</form>
<p>Your name: {name}</p>
<script>
export default {
onMounted() {
this.name = '';
},
handleSubmit(e) {
e.preventDefault(); // Form এর ডিফল্ট সাবমিট প্রতিরোধ করা হয়
this.name = this.refs.nameInput.value; // ইনপুট ভ্যালু নেয়া হয়
}
}
</script>
</submit-event>
এখানে, onsubmit ইভেন্ট ব্যবহার করে একটি ফর্ম সাবমিট করার ব্যবস্থা করা হয়েছে। handleSubmit ফাংশনটি সাবমিট হওয়ার সময় চালু হবে এবং e.preventDefault() ব্যবহার করে ফর্মের ডিফল্ট সাবমিট প্রতিরোধ করা হবে, যাতে পেজ রিফ্রেশ না হয়। এছাড়া, this.refs.nameInput.value দিয়ে ইনপুট ফিল্ডের মান নেয়া হবে।
Riot.js এ ইভেন্ট হ্যান্ডলিং এর মূল বৈশিষ্ট্য:
- ইভেন্ট হ্যান্ডলার সংযুক্ত করা: HTML তে সরাসরি
onclick,oninput,onsubmitইভেন্টগুলির জন্য ফাংশন হ্যান্ডলার যোগ করা যায়। e(ইভেন্ট অবজেক্ট): ইভেন্টের সাথেeঅবজেক্ট পাওয়া যায়, যা ইভেন্ট সম্পর্কিত তথ্য ধারণ করে (যেমনe.target.valueইনপুট ফিল্ডের মান পেতে ব্যবহার করা হয়)।thisপ্রপার্টি: কম্পোনেন্টের প্রপার্টি এবং স্টেট পরিবর্তন করার জন্যthisব্যবহার করা হয়, যেমনthis.messageবাthis.inputText।
সারাংশ:
Riot.js এ ইভেন্ট হ্যান্ডলিং খুবই সহজ এবং ডিরেক্ট। ইভেন্টের জন্য ফাংশন তৈরি করা এবং কম্পোনেন্টের HTML অংশে সেই ফাংশনকে যুক্ত করা হয়। Riot.js কম্পোনেন্টে ইভেন্ট হ্যান্ডলিং এমন একটি মেথড যা সোজা, পরিষ্কার, এবং খুবই ইন্টারেক্টিভ ইউজার ইন্টারফেস তৈরি করতে সহায়ক।
Read more
