React ফর্ম কম্পোনেন্ট তৈরির গাইড

React Form Component তৈরির নির্দেশিকা

React-এ ফর্ম তৈরি করার জন্য সতর্কতার সাথে state management করা প্রয়োজন। এই নির্দেশিকাটি আপনাকে স্ক্র্যাচ থেকে একটি রেজিস্ট্রেশন ফর্ম কীভাবে তৈরি করতে হয় তা দেখাবে।

আপনি চারটি প্রধান ধারণা শিখবেন:

• State Management সমস্ত ফর্ম ফিল্ড একটি state অবজেক্টে সংরক্ষণ করুন। নাম, বয়স, ইমেল এবং পাসওয়ার্ড ট্র্যাক করার জন্য useState hook ব্যবহার করুন।

• Handling Inputs সমস্ত ইনপুট পরিবর্তন পরিচালনা করতে একটি ফাংশন ব্যবহার করুন। আপনি পুরনো ডেটা স্প্রেড (spread) করে এবং ইনপুট নামের ভিত্তিতে নতুন মান যোগ করে state আপডেট করবেন।

• Form Validation সাবমিট করার আগে সমস্ত ফিল্ডে ডেটা আছে কিনা তা পরীক্ষা করুন। কোনো ফিল্ড খালি থাকলে একটি অ্যালার্ট দেখান।

• Keyboard Support Enter কী-এর জন্য একটি লিসেনার (listener) যোগ করুন। এটি ব্যবহারকারীদের বাটন ক্লিক না করেই ফর্ম সাবমিট করতে সাহায্য করবে।

কোড উদাহরণ:

import { useState } from "react";

function FormValidation() {
  const [userdata, setUserdata] = useState({
    name: "",
    age: "",
    mobile: "",
    email: "",
    dob: "",
    password: ""
  });

  function getdata(e) {
    const { name, value } = e.target;
    setUserdata({
      ...userdata,
      [name]: value
    });
  }

  function validate() {
    const { name, age, mobile, email, dob, password } = userdata;
    if (name && age && mobile && email && dob && password) {
      alert("Submitted successfully");
    } else {
      alert("Please fill all fields");
    }
  }

  function handlekey(e) {
    if (e.key === "Enter") {
      validate();
    }
  }

  return (
    <form onKeyDown={handlekey}>
      <input name="name" onChange={getdata} value={userdata.name} />
      <input name="age" onChange={getdata} value={userdata.age} />
      <input name="mobile" onChange={getdata} value={userdata.mobile} />
      <input name="email" onChange={getdata} value={userdata.email} />
      <input name="dob" onChange={getdata} value={userdata.dob} />
      <input name="password" type="password" onChange={getdata} value={userdata.password} />
      <button type="button" onClick={validate}>Submit</button>
    </form>
  );
}

উৎস: https://dev.to/jayashree_a84b6eff7bc414e/react-form-component-blog-explanation-with-code-3enh