مدیریت فرم‌ها در React

مدیریت فرم‌ها در React

فرم‌ها در رابط کاربری نقش مهمی دارند؛ از ورود اطلاعات کاربر گرفته تا ثبت‌نام و پرداخت. در React، به دلیل مدیریت داده‌ها با state، فرم‌ها با رویکرد متفاوتی نسبت به HTML سنتی پیاده‌سازی می‌شوند.

در این فصل یاد می‌گیریم که فرم‌ها را چگونه کنترل کنیم، اعتبارسنجی انجام دهیم، از کتابخانه‌های پرکاربرد کمک بگیریم و حتی فرم‌های چندمرحله‌ای بسازیم.

فرم‌های کنترل‌شده vs غیرکنترل‌شده

Controlled Component

در این حالت، مقادیر input توسط state کنترل می‌شود:

const [name, setName] = useState("");
 setName(e.target.value)} />

مزیت: کنترل کامل روی مقادیر، مناسب برای اعتبارسنجی

محدودیت: نوشتن بیشتر برای هر فیلد

Uncontrolled Component

در این روش، از ref برای دسترسی مستقیم به DOM استفاده می‌شود:

const inputRef = useRef();

مزیت: نوشتن کمتر

محدودیت: کمتر مناسب برای فرم‌های پیچیده یا اعتبارسنجی

مدیریت input‌ها و اعتبارسنجی ساده

یک مثال ساده از فرم با اعتبارسنجی:

const [email, setEmail] = useState("");
const [error, setError] = useState("");
const handleSubmit = (e) => {
 e.preventDefault();
 if (!email.includes("@")) {
 setError("ایمیل نامعتبر است");
 } else {
 setError("");
 console.log("ارسال شد:", email);
 }
};
  setEmail(e.target.value)} />
 {error && 
{error}
}
 ارسال

استفاده از کتابخانه‌هایی مثل React Hook Form یا Formik

برای مدیریت فرم‌های پیچیده‌تر، کتابخانه‌هایی مثل React Hook Form یا Formik بسیار محبوب هستند.

React Hook Form (سبک و سریع)

npm install react-hook-form

import { useForm } from "react-hook-form";
const { register, handleSubmit, formState: { errors } } = useForm();
 console.log(data))}>
 
 {errors.username && فیلد الزامی است}
 ارسال

مزایا:

پرفرمنس بالا

نیاز کمتر به state

پشتیبانی قوی از validation

Formik (مناسب برای فرم‌های بزرگ)

npm install formik

import { Formik, Form, Field, ErrorMessage } from 'formik';
 initialValues={{ email: "" }}
 validate={values => {
 const errors = {};
 if (!values.email) errors.email = "ایمیل الزامی است";
 return errors;
 }}
 onSubmit={values => console.log(values)}
>
 
 
 
 ارسال
 

پیاده‌سازی فرم‌های چندمرحله‌ای

فرم‌های چندمرحله‌ای برای فرآیندهای پیچیده (مانند ثبت‌نام، رزرو یا پرداخت) بسیار کاربرد دارند. مثال ساده:

const [step, setStep] = useState(1);
const [formData, setFormData] = useState({ name: "", email: "" });
return (
 <>
 {step === 1 && (
 <>
 
 value={formData.name}
 onChange={e => setFormData({ ...formData, name: e.target.value })}
 />
  setStep(2)}>بعدی
 
 )}
 {step === 2 && (
 <>
 
 value={formData.email}
 onChange={e => setFormData({ ...formData, email: e.target.value })}
 />
  setStep(1)}>قبلی
  console.log("ارسال نهایی", formData)}>ارسال
 
 )}
 
);

نکته مهم: در فرم‌های چندمرحله‌ای، مدیریت state کلی در سطح بالا ضروری است.

جمع‌بندی

در این بخش یاد گرفتیم که فرم‌ها را چگونه کنترل کنیم، داده‌های ورودی را اعتبارسنجی کنیم و با کمک کتابخانه‌هایی مثل React Hook Form و Formik، توسعه فرم‌ها را ساده‌تر کنیم. همچنین با ساخت فرم‌های چندمرحله‌ای، برای پروژه‌های واقعی آماده‌تر شدیم.

در فصل بعد به سراغ هوک‌ها (Hooks) می‌رویم و با useState، useEffect و ساخت هوک‌های سفارشی آشنا خواهیم شد.