🎯 Forms & Input Handling in React.js — বিস্তারিত ব্যাখ্যা

🎯 Forms & Input Handling in React.js — বিস্তারিত ব্যাখ্যা (Bengali)

React.js-এ ফর্ম ইনপুট হ্যান্ডেল করা হলো অ্যাপ্লিকেশনের অন্যতম গুরুত্বপূর্ণ অংশ।
React একটি controlled component মডেল ব্যবহার করে, যেখানে ইনপুটের ভ্যালু React state দ্বারা নিয়ন্ত্রিত হয়।

⭐ ১) React-এ Form Handling কী?

ওয়েব অ্যাপ্লিকেশনে ব্যবহারকারীর ইনপুট নেওয়ার জন্য ফর্ম প্রয়োজন — যেমন:

  • Login form

  • Registration form

  • Search bar

  • Comments form

  • Contact form

  • Payment information

React-এ এই ফর্মগুলোর ভ্যালু HTML-এর মতো DOM দ্বারা নিয়ন্ত্রিত হয় না।
বরং React state সবকিছু নিয়ন্ত্রণ করে।

এটাই controlled form concept।

⭐ ২) Controlled Component কী?

যখন ইনপুটের ভ্যালু React-এর state-এ থাকে এবং ইনপুট পরিবর্তন হলে state-ও পরিবর্তন হয়, তখন তাকে controlled component বলা হয়।

✔️ ইনপুটের ভ্যালু = state

✔️ state আপডেট = setState বা setValue

অর্থাৎ:

User input → triggers event → React updates state → UI updates

⭐ ৩) একটাই Input Control করার Example

📌 Simple Input Field Example

make this in html formate because i want to store in my database in html formate and show in my website in same design.

import { useState } from "react";
function MyForm() {
 const [name, setName] = useState("");

return (
<div>
<h2>Enter Your Name:</h2>

<input
 type="text"
 value={name}
 onChange={(e) => setName(e.target.value)}
 />
<p>Your Name: {name}</p>
 </div>
 );
}
export default MyForm;

✔️ ব্যাখ্যা:

  • name হলো state

  • value={name} মানে ইনপুট React state দ্বারা নিয়ন্ত্রিত

  • onChange হলো React event

  • প্রতিবার ইনপুট টাইপ করলে state আপডেট হয়

  • UI তৎক্ষণাৎ রিরেন্ডার হয়

⭐ ৪) Multiple Input Field Control করার নিয়ম

একটা ফর্মে যদি একাধিক ইনপুট থাকে— যেমন:

  • name

  • email

  • phone

তাহলে প্রতিটি state আলাদা করে রাখতে পারো
অথবা
একটি অবজেক্ট স্টেটে সব ভ্যালু রাখতে পারো।

✔️ Multiple Input Handling (Best Practice)

import { useState } from "react";

function SignupForm() {
const [formData, setFormData] = useState({
name: "",
email: "",
password: ""
});

// Common handler
const handleChange = (e) => {
const { name, value } = e.target;

setFormData({
...formData,
[name]: value
});
};

return (
<div>
<h2>Signup Form</h2>

<input
type="text"
name="name"
placeholder="Enter Name"
value={formData.name}
onChange={handleChange}
/>

<input
type="email"
name="email"
placeholder="Enter Email"
value={formData.email}
onChange={handleChange}
/>

<input
type="password"
name="password"
placeholder="Enter Password"
value={formData.password}
onChange={handleChange}
/>

<p>{JSON.stringify(formData)}</p>
</div>
);
}

export default SignupForm;

✔️ ব্যাখ্যা:

  • formData state একটি object

  • নাম, ইমেইল, পাসওয়ার্ড সব একই state-এ রাখা

  • handleChange function সব ইনপুট হ্যান্ডেল করে

  • name="email" মানে ইনপুটের name property দিয়ে state update হচ্ছে

⭐ ৫) Form Submit Handling

React-এ form submit করলে পেজ reload হওয়া আটকাতে হয়:

const handleSubmit = (e) => {
e.preventDefault();
console.log("Form Submitted", formData);
};

Full Example:

function FullForm() {
const [data, setData] = useState({
username: "",
age: ""
});

const handleChange = (e) => {
setData({ ...data, [e.target.name]: e.target.value });
};

const handleSubmit = (e) => {
e.preventDefault();
alert(`Submitted: ${data.username} (${data.age})`);
};

return (
<form onSubmit={handleSubmit}>
<input
name="username"
value={data.username}
onChange={handleChange}
placeholder="Enter name"
/>

<input
name="age"
value={data.age}
onChange={handleChange}
placeholder="Enter age"
/>

<button type="submit">Submit</button>
</form>
);
}

⭐ ৬) Checkbox Handling in React

Checkbox-এর value আসে e.target.checked থেকে।

const [isAgree, setIsAgree] = useState(false);

<input
type="checkbox"
checked={isAgree}
onChange={(e) => setIsAgree(e.target.checked)}
/>

<p>User has {isAgree ? "Agreed" : "Not Agreed"}</p>

User has {isAgree ? "Agreed" : "Not Agreed"}

⭐ ৭) Radio Button Handling

const [gender, setGender] = useState("");

<input
type="radio"
value="male"
name="gender"
onChange={(e) => setGender(e.target.value)}
/>
<input
type="radio"
value="female"
name="gender"
onChange={(e) => setGender(e.target.value)}
/>

<p>Gender: {gender}</p>

⭐ ৮) Select Dropdown Handling

const [country, setCountry] = useState("India");

<select value={country} onChange={(e) => setCountry(e.target.value)}>
<option>India</option>
<option>Bangladesh</option>
<option>Nepal</option>
</select>

← Previous Next →
👼 Quiz
/

লোড হচ্ছে...

Interview Questions:

1. React এ Form Handling কী?

Form Handling হলো ইউজারের ইনপুট গ্রহণ করে সেটিকে React state এর মাধ্যমে নিয়ন্ত্রণ করা।

2. Controlled Component কী?

যে কম্পোনেন্টে ফর্ম ইনপুটের মান React state দ্বারা নিয়ন্ত্রিত হয় তাকে Controlled Component বলে।

3. input ফিল্ডে onChange কেন ব্যবহার করা হয়?

onChange ইভেন্ট ব্যবহার করে ইউজারের ইনপুট অনুযায়ী state আপডেট করা হয়।

4. Form submit করার সময় preventDefault() কেন ব্যবহার করা হয়?

preventDefault() ব্যবহার করে ব্রাউজারের ডিফল্ট রিলোড আচরণ বন্ধ করা হয় যাতে React অ্যাপ রিফ্রেশ না হয়।