সিম্পল HTML ফর্মে, ফর্ম এলিমেন্টগুলো ইন্টারন্যালি ভ্যালু রাখে এবং সাবমিট বাটনে ক্লিক করলে সাবমিট হয়।
HTML ফর্ম উদাহরণ
<!DOCTYPE html> <html> <head>
<title>Form Example</title> </head>
<body>
<form>
<label>User Name: <input type="text" name="username" /></label>
<input type="submit" value="Submit Form" />
</form>
</body> </html>HTML ফর্মের ডিফল্ট বিহেভিয়র হলো নতুন পেজে নেভিগেট করা (পোস্ট সাবমিশন পেজ)। কিন্তু জাভাস্ক্রিপ্ট ফর্ম সাবমিশন হ্যান্ডলার দিয়ে ভ্যালিডেশন করা যায়, যা ইউজারকে রিলেভেন্ট ফিডব্যাক দেয়।
React-এ ফর্ম হ্যান্ডলিং-এর জন্য Controlled Components কনসেপ্ট ব্যবহার করা হয়।
React-এ Controlled Component
HTML-এ input, textarea ইত্যাদি নিজস্ব স্টেট রাখে এবং ইউজার একশনের ওপর ভিত্তি করে আপডেট হয়। React-এ মিউটেবল ফিল্ডগুলো state অবজেক্টে রাখা হয়।
Username ফিল্ড হ্যান্ডলিং (Class Component)
class UserForm extends React.Component {
constructor(props) {
super(props);
this.state = {username: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({username: event.target.value});
}
handleFormSubmit(event) {
console.log('username: ' + this.state.username);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleFormSubmit}>
<label>
Name:
<input type="text" value={this.state.username} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}onChange হ্যান্ডলার দিয়ে স্টেট আপডেট হয়। onSubmit-এ event.preventDefault() দিয়ে ডিফল্ট সাবমিশন বন্ধ করা হয়েছে।
অন্যান্য Controlled Components
textarea, select ট্যাগ, রেডিও বাটন ইত্যাদি কন্ট্রোল্ড কম্পোনেন্ট। file টাইপ হলো আনকন্ট্রোল্ড (রিড-অনলি, সাবমিশন সময় ভ্যালু পায়)।
একক ফাংশনে মাল্টিপল ইনপুট হ্যান্ডলিং
handleInputChange(event) {
const value = event.target.value;
const name = event.target.name;
this.setState({ [name]: value });
}name অ্যাট্রিবিউট দিয়ে কোন ফিল্ড আপডেট হবে সেটি ডাইনামিক্যালি নির্ণয় হয়।
বেস্ট প্র্যাকটিস
- Controlled ইনপুটে null ভ্যালু এড়াতে ডিফল্ট ভ্যালু দিন (স্টেটে ইনিশিয়ালাইজ করুন)
- বড় স্কেলের ফর্মের জন্য 써ড-পার্টি লাইব্রেরি যেমন Formik ব্যবহার করুন - এটি ভ্যালিডেশন, ইউজার ফিডব্যাক ইত্যাদি সহজ করে দেয়।
