Controlled এবং Uncontrolled Components

Form Handling এবং Validation - রিয়্যাক্ট জেএস (ReactJS) - Web Development

334

ReactJS-এ Controlled এবং Uncontrolled কম্পোনেন্ট দুটি গুরুত্বপূর্ণ ধারণা। এগুলো মূলত ইনপুট ফিল্ড (যেমন input, textarea, select ইত্যাদি) এর স্টেট ম্যানেজমেন্টের পদ্ধতি নির্দেশ করে।

Controlled Components

Controlled Components হল এমন কম্পোনেন্ট যেখানে ইনপুট ফিল্ডের মান React স্টেট দ্বারা নিয়ন্ত্রিত হয়। অর্থাৎ, ইনপুটের মান স্টেটের মধ্যে সঞ্চিত থাকে এবং সেই মান পরিবর্তন করার জন্য React স্টেট আপডেট করা হয়।

একটি controlled কম্পোনেন্টে ইনপুট ফিল্ডের মান সর্বদা React স্টেটে উপস্থিত থাকে এবং onChange ইভেন্ট হ্যান্ডলার ব্যবহার করে এটি পরিবর্তিত হয়।

ব্যবহার:

ইনপুটের মান React স্টেটে সংরক্ষিত থাকে।
ইনপুটের পরিবর্তন ঘটানোর জন্য স্টেট আপডেট করা হয়।

উদাহরণ:

import React, { useState } from 'react';

const ControlledForm = () => {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value); // ইনপুট মান আপডেট করা
  };

  const handleSubmit = (event) => {
    alert('A name was submitted: ' + value);
    event.preventDefault();
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          value={value} // ইনপুটের মান React স্টেট থেকে আসছে
          onChange={handleChange} // স্টেট আপডেট করার জন্য
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
};

export default ControlledForm;

এখানে:

ইনপুটের মান value স্টেটে সংরক্ষিত হচ্ছে।
onChange ইভেন্ট হ্যান্ডলার ব্যবহার করে ইনপুটের মান পরিবর্তন করা হচ্ছে।
যখন ফর্ম সাবমিট হবে, তখন value স্টেট থেকে ইনপুটের মান নেওয়া হবে।

Uncontrolled Components

Uncontrolled Components হল এমন কম্পোনেন্ট যেখানে ইনপুট ফিল্ডের মান React স্টেট দ্বারা নিয়ন্ত্রিত হয় না। এর পরিবর্তে, ইনপুটের মান DOM দ্বারা সরাসরি নিয়ন্ত্রিত হয়, এবং React স্টেটের সাথে এর কোনো সংযোগ থাকে না।

Uncontrolled কম্পোনেন্টে, আপনি ref ব্যবহার করে ইনপুট ফিল্ডের মান অ্যাক্সেস করেন, এবং সাধারণত useRef হুক ব্যবহার করা হয়।

ব্যবহার:

ইনপুটের মান DOM-এর মাধ্যমে সরাসরি নিয়ন্ত্রিত হয়।
স্টেট ব্যবহারের প্রয়োজন হয় না, তবে ref ব্যবহার করে মান অ্যাক্সেস করা হয়।

উদাহরণ:

import React, { useRef } from 'react';

const UncontrolledForm = () => {
  const inputRef = useRef();

  const handleSubmit = (event) => {
    alert('A name was submitted: ' + inputRef.current.value); // DOM থেকে ইনপুট মান নেওয়া
    event.preventDefault();
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          ref={inputRef} // ref দিয়ে ইনপুট ফিল্ড অ্যাক্সেস করা
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
};

export default UncontrolledForm;

এখানে:

inputRef একটি ref যা ইনপুট ফিল্ডের DOM এলিমেন্টে পয়েন্ট করছে।
ইনপুটের মান inputRef.current.value দিয়ে সরাসরি DOM থেকে নেওয়া হচ্ছে।