راهنمای ساخت کامپوننت فرم در ری‌اکت

راهنمای ساخت کامپوننت فرم در React

ساخت فرم در React نیازمند مدیریت دقیق وضعیت (state) است. این راهنما به شما نشان می‌دهد که چگونه یک فرم ثبت‌نام را از صفر بسازید.

شما چهار مفهوم اصلی را یاد خواهید گرفت:

• مدیریت وضعیت (State Management) تمام فیلدهای فرم را در یک شیء وضعیت (state object) ذخیره کنید. از هوک useState برای ردیابی نام، سن، ایمیل و رمز عبور استفاده کنید.

• مدیریت ورودی‌ها (Handling Inputs) از یک تابع برای مدیریت تمام تغییرات ورودی استفاده کنید. شما با استفاده از spread کردن داده‌های قدیمی و افزودن مقدار جدید بر اساس نام ورودی، وضعیت را به‌روزرسانی می‌کنید.

• اعتبارسنجی فرم (Form Validation) قبل از ارسال، بررسی کنید که آیا تمام فیلدها حاوی داده هستند یا خیر. اگر هر فیلدی خالی بود، یک هشدار (alert) نمایش دهید.

• پشتیبانی از کیبورد (Keyboard Support) یک شنونده (listener) برای کلید Enter اضافه کنید. این کار به کاربران اجازه می‌دهد بدون کلیک کردن روی دکمه، فرم را ارسال کنند.

نمونه کد:

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