ReactJS এ ফর্ম তৈরি এবং হ্যান্ডল করা

ReactJS-এ ফর্ম তৈরি এবং হ্যান্ডল করা একটি গুরুত্বপূর্ণ কাজ, কারণ এটি ব্যবহারকারীর ইনপুট সংগ্রহের প্রক্রিয়া এবং সেই ইনপুটের উপর ভিত্তি করে অ্যাপ্লিকেশনের স্টেট আপডেট করার জন্য ব্যবহৃত হয়। ReactJS-এ ফর্ম হ্যান্ডলিং সিস্টেম কিছুটা আলাদা, কারণ এখানে state ব্যবহার করে ইনপুট ফিল্ডের মান স্টোর করা হয়, এবং ইনপুটের পরিবর্তন ঘটলে সেই স্টেট আপডেট হয়।

ReactJS-এ ফর্ম তৈরির জন্য সাধারণত দুটি পদ্ধতি ব্যবহার হয়:

1. Uncontrolled Components
2. Controlled Components

১. Controlled Components

Controlled Components হল এমন ফর্ম কম্পোনেন্ট, যার ইনপুট ফিল্ডের মান React কম্পোনেন্টের স্টেট দ্বারা নিয়ন্ত্রিত হয়। অর্থাৎ, ইনপুট ফিল্ডের মান এবং স্টেট একে অপরের সাথে সিঙ্ক্রোনাইজ থাকে। এটি React এর অন্যতম শক্তিশালী বৈশিষ্ট্য, কারণ এতে ডেভেলপাররা ইনপুট ফিল্ডের পরিবর্তন খুব সহজে ট্র্যাক করতে এবং নিয়ন্ত্রণ করতে পারেন।

উদাহরণ:

import React, { useState } from 'react';

function Form() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    alert('Submitted Value: ' + inputValue);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          value={inputValue}  // স্টেট দ্বারা নিয়ন্ত্রিত
          onChange={handleChange}  // ইনপুট পরিবর্তন ট্র্যাক করা
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default Form;

এখানে:

• value={inputValue}: ইনপুট ফিল্ডের মান inputValue স্টেট দ্বারা নিয়ন্ত্রিত।
• onChange={handleChange}: ইনপুটের পরিবর্তন হলে handleChange ফাংশন কল হয় এবং স্টেট আপডেট হয়।

Controlled Components-এর সুবিধা:

• ইনপুট ফিল্ডের মান React স্টেট দ্বারা সম্পূর্ণভাবে নিয়ন্ত্রিত হয়, তাই ডেটা এককভাবে অ্যাক্সেস করা সহজ।
• ইউজারের ইনপুটের উপর লজিক বা ভ্যালিডেশন প্রয়োগ করা খুবই সহজ।
• ফর্মের ইনপুটগুলোর মান বা স্টেট ইত্যাদি পুরোপুরি React এর মধ্যে থাকে, যা আরও ভাল ডিবাগিং এবং পারফরম্যান্সের জন্য উপকারী।

২. Uncontrolled Components

Uncontrolled Components হল ফর্ম কম্পোনেন্ট, যার ইনপুট ফিল্ডের মান DOM দ্বারা নিয়ন্ত্রিত হয়, React স্টেট দ্বারা নয়। এই ধরনের কম্পোনেন্টগুলির মধ্যে ইনপুট ফিল্ডে ref ব্যবহার করা হয় মান অ্যাক্সেস করার জন্য।

উদাহরণ:

import React, { useRef } from 'react';

function Form() {
  const inputRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    alert('Submitted Value: ' + inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          ref={inputRef}  // ref ব্যবহার করে DOM এ অ্যাক্সেস
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default Form;

এখানে:

• ref={inputRef}: ইনপুট ফিল্ডের মান সরাসরি DOM এর মাধ্যমে ট্র্যাক করা হচ্ছে।
• inputRef.current.value: ইনপুটের মান inputRef ব্যবহার করে DOM থেকে সরাসরি পাওয়া যায়।

Uncontrolled Components-এর সুবিধা:

• ছোট এবং দ্রুত প্রোটোটাইপ তৈরির জন্য উপযুক্ত।
• স্টেট ম্যানেজমেন্টের সাথে জড়িত না হওয়ায় কিছু ক্ষেত্রে কোড সহজ হতে পারে।
• যেসব ক্ষেত্রে React স্টেট ব্যবহার না করলেই হয়, সেখানে এই পদ্ধতি ব্যবহার করা সুবিধাজনক।

৩. ফর্ম ভ্যালিডেশন

ফর্ম ভ্যালিডেশন ReactJS-এ একটি গুরুত্বপূর্ণ বিষয়, যেখানে ইউজারের ইনপুট যাচাই করা হয়। Controlled কম্পোনেন্টে ভ্যালিডেশন সহজে করা যায়, কারণ স্টেট এর মাধ্যমে মান ট্র্যাক করা হয় এবং স্টেট আপডেট করা হয়। এখানে, আপনি শর্তানুযায়ী ইনপুট যাচাই করে সাবমিট করার আগে ভ্যালিডেশন করতে পারেন।

উদাহরণ:

import React, { useState } from 'react';

function Form() {
  const [inputValue, setInputValue] = useState('');
  const [error, setError] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    if (!inputValue) {
      setError('Name is required');
    } else {
      setError('');
      alert('Form submitted: ' + inputValue);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          value={inputValue}
          onChange={handleChange}
        />
      </label>
      {error && <div style={{ color: 'red' }}>{error}</div>}
      <button type="submit">Submit</button>
    </form>
  );
}

export default Form;

এখানে:

• error স্টেট ব্যবহার করা হয়েছে, যা ইউজারের ইনপুট ভুল হলে একটি বার্তা দেখাবে।
• handleSubmit ফাংশনে ইনপুট ভ্যালিডেশনের শর্ত দেওয়া হয়েছে, যেখানে যদি ইনপুট ফাঁকা থাকে তবে একটি ত্রুটি বার্তা দেখানো হয়।

৪. ফর্মের multiple ইনপুট হ্যান্ডলিং

যখন ফর্মে একাধিক ইনপুট ফিল্ড থাকে, তখন handleChange ফাংশনকে আরও সাধারণভাবে লেখা হয়, যাতে সমস্ত ইনপুট ফিল্ডের জন্য একটি সাধারণ হ্যান্ডলার ব্যবহার করা যায়। এখানে, আপনি name অ্যাট্রিবিউট ব্যবহার করে ফিল্ডগুলোকে আলাদা আলাদা ভাবে ট্র্যাক করতে পারেন।

উদাহরণ:

import React, { useState } from 'react';

function Form() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData({
      ...formData,
      [name]: value,
    });
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    alert('Submitted Data: ' + JSON.stringify(formData));
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleChange}
        />
      </label>
      <label>
        Email:
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default Form;

এখানে:

• formData স্টেট একটি অবজেক্ট হিসেবে ব্যবহৃত হচ্ছে, যাতে একাধিক ইনপুট ফিল্ডের মান রাখা যায়।
• handleChange ফাংশনে name অ্যাট্রিবিউট দ্বারা ডাইনামিকভাবে ইনপুট ফিল্ডের মান আপডেট করা হচ্ছে।

সারাংশ:

ReactJS-এ ফর্ম তৈরি এবং হ্যান্ডলিং একটি গুরুত্বপূর্ণ কাজ, এবং আপনি এতে Controlled Components বা Uncontrolled Components ব্যবহার করতে পারেন। Controlled Components ফর্মের ইনপুট ফিল্ডের মান React স্টেট দ্বারা নিয়ন্ত্রিত হয়, যা কোডের পরিপূর্ণ নিয়ন্ত্রণ এবং ডিবাগিং সহজ করে। React-এ ফর্মের ইনপুট ভ্যালিডেশন এবং একাধিক ইনপুট হ্যান্ডলিংসহ বেশ কিছু গুরুত্বপূর্ণ ফিচার রয়েছে, যা ডেভেলপারদের শক্তিশালী এবং ডাইনামিক ফর্ম তৈরি করতে সহায়তা করে।