8. React Forms
📘 কনসেপ্ট (থিওরি)
এইচটিএমএল এর মতোই, ব্যবহারকারীদের ওয়েব পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করার অনুমতি দিতে রিঅ্যাক্ট ফর্ম ব্যবহার করে।
ফর্ম হ্যান্ডলিং হলো যখন ডেটার মান পরিবর্তন হয় বা সাবমিট করা হয় তখন আপনি কীভাবে ডেটা হ্যান্ডেল করেন সে সম্পর্কে।
এইচটিএমএল এ, ফর্মের ডেটা সাধারণত ডম (DOM) দ্বারা হ্যান্ডেল করা হয়।
রিঅ্যাক্টে, ফর্মের ডেটা সাধারণত কম্পোনেন্ট দ্বারা হ্যান্ডেল করা হয়।
যখন ডেটা কম্পোনেন্ট দ্বারা হ্যান্ডেল করা হয়, তখন সমস্ত ডেটা কম্পোনেন্ট স্টেটে (state) সংরক্ষিত থাকে।
💡 উদাহরণ
ফর্ম হ্যান্ডলিং:
import { useState } from 'react';
function MyForm() {
const [name, setName] = useState("");
const handleSubmit = (event) => {
event.preventDefault(); // পেজ রিলোড হওয়া রোধ করে
alert(
The name you entered was: ${name});
}
return (
);
}
🎯 আপনার কাজ (প্র্যাকটিস)
একটি টেক্সট ইনপুটসহ একটি ফর্ম কম্পোনেন্ট
SimpleForm তৈরি করুন। এই অনুশীলনের জন্য এর স্টেটের প্রয়োজন নেই, শুধুমাত্র একটি onSubmit হ্যান্ডলার যা event.preventDefault() কল করে এবং "Submitted!" অ্যালার্ট দেয়।main.react
Loading...
OUTPUT
Run your code to see the output here...