در حال بارگذاری...

فرم‌ها در React

فرم‌ها در ری‌اکت (React) بخش اساسی مدیریت ورودی کاربران و تعامل با داده‌ها در اپلیکیشن‌های مدرن هستند. در برنامه‌های تک‌صفحه‌ای (SPA) و وب اپلیکیشن‌های پویا، فرم‌ها نه تنها برای جمع‌آوری اطلاعات استفاده می‌شوند، بلکه مدیریت state، اعتبارسنجی داده‌ها و هماهنگی با backend را نیز بر عهده دارند. ری‌اکت با استفاده از کامپوننت‌ها، مدیریت state و جریان داده‌ها، امکان ساخت فرم‌های قابل کنترل، مقیاس‌پذیر و بهینه را فراهم می‌کند.
استفاده از فرم‌ها در ری‌اکت به شما اجازه می‌دهد داده‌های کاربران را با کنترل کامل از طریق state و props مدیریت کنید. مفاهیم کلیدی مانند کامپوننت‌ها، مدیریت state با useState و useReducer، جریان داده (data flow)، و چرخه حیات کامپوننت‌ها (lifecycle) در طراحی فرم‌ها اهمیت زیادی دارند. در این آموزش شما یاد می‌گیرید چگونه فرم‌های قابل استفاده مجدد بسازید، state و data flow را بهینه کنید، و از اشتباهات رایجی مانند prop drilling، re-render غیرضروری و تغییر مستقیم state جلوگیری کنید.
پس از مطالعه این آموزش، قادر خواهید بود فرم‌هایی با اعتبارسنجی، مدیریت error و کنترل کامل ورودی‌ها در ری‌اکت بسازید و آن‌ها را در پروژه‌های واقعی SPA به کار ببرید. این دانش پایه‌ای است برای توسعه فرم‌های پیشرفته، شامل فرم‌های ثبت‌نام، لاگین، و فیلدهای پویا در اپلیکیشن‌های مدرن.

مثال پایه

jsx

JSX Code

import React, { useState } from 'react';

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

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

const handleSubmit = (e) => {
e.preventDefault();
console.log('Form Data Submitted:', formData);
alert(`سلام ${formData.name}، ایمیل شما ${formData.email} است`);
};

return ( <form onSubmit={handleSubmit}> <div> <label>نام:</label> <input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
/> </div> <div> <label>ایمیل:</label> <input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
/> </div> <button type="submit">ارسال</button> </form>
);
}

export default SimpleForm;

در مثال بالا، یک فرم ساده با کامپوننت Functional ایجاد شده است. از useState برای مدیریت state فرم استفاده شده و ورودی‌ها به صورت controlled components تعریف شده‌اند؛ به این معنا که مقدار inputها مستقیماً از state گرفته می‌شود و تغییرات آن‌ها توسط handleChange کنترل می‌شود.
handleChange با استفاده از destructuring، name و value هر input را دریافت کرده و state فرم را به صورت immutable به‌روز می‌کند. این کار از مشکلات متداول مانند تغییر مستقیم state جلوگیری می‌کند و باعث بهینه‌سازی re-renderها می‌شود.
handleSubmit، عملکرد پیش‌فرض فرم را متوقف می‌کند و داده‌ها را در console و alert نمایش می‌دهد. این روش، جریان داده‌ها را کاملاً قابل پیش‌بینی می‌کند و نمونه‌ای از مدیریت state و data flow در فرم‌های ری‌اکت است. همچنین این مثال نشان می‌دهد چگونه کامپوننت‌ها می‌توانند reusable و maintainable باشند.

مثال کاربردی

jsx

JSX Code

import React, { useState, useEffect } from 'react';

function RegistrationForm() {
const [formData, setFormData] = useState({ username: '', password: '', confirmPassword: '' });
const [errors, setErrors] = useState({});
const [isSubmitting, setIsSubmitting] = useState(false);

useEffect(() => {
if (isSubmitting) {
const noErrors = Object.keys(errors).length === 0;
if (noErrors) {
console.log('ثبت فرم موفقیت‌آمیز:', formData);
alert('ثبت‌نام با موفقیت انجام شد!');
}
setIsSubmitting(false);
}
}, [errors]);

const validate = () => {
let tempErrors = {};
if (!formData.username) tempErrors.username = "نام کاربری الزامی است";
if (!formData.password) tempErrors.password = "رمز عبور الزامی است";
if (formData.password !== formData.confirmPassword)
tempErrors.confirmPassword = "رمزها مطابقت ندارند";
return tempErrors;
};

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

const handleSubmit = (e) => {
e.preventDefault();
setErrors(validate());
setIsSubmitting(true);
};

return ( <form onSubmit={handleSubmit}> <div> <label>نام کاربری:</label> <input name="username" value={formData.username} onChange={handleChange} />
{errors.username && <span>{errors.username}</span>} </div> <div> <label>رمز عبور:</label> <input type="password" name="password" value={formData.password} onChange={handleChange} />
{errors.password && <span>{errors.password}</span>} </div> <div> <label>تایید رمز عبور:</label> <input type="password" name="confirmPassword" value={formData.confirmPassword} onChange={handleChange} />
{errors.confirmPassword && <span>{errors.confirmPassword}</span>} </div> <button type="submit">ثبت‌نام</button> </form>
);
}

export default RegistrationForm;

این مثال پیشرفته، فرم ثبت‌نامی با سه فیلد ورودی ایجاد می‌کند و اعتبارسنجی client-side را پیاده‌سازی می‌کند. خطاها در state جداگانه نگهداری می‌شوند تا component به‌صورت ماژولار و قابل استفاده مجدد باشد.
استفاده از useEffect به عنوان lifecycle hook نمونه‌ای از مدیریت side-effectها و چرخه حیات کامپوننت‌هاست. زمانی که فرم ارسال می‌شود، validate فراخوانی شده و در صورت نبود خطا، عملیات موفقیت‌آمیز اجرا می‌شود. این الگو نشان می‌دهد چگونه جریان داده‌ها (data flow) و مدیریت state در فرم‌های پیشرفته ری‌اکت انجام می‌شود.

📊 جدول مرجع

ری‌اکت (React) Element/Concept	Description	Usage Example
useState	مدیریت state در سطح کامپوننت	const [value, setValue] = useState('')
useEffect	مدیریت side-effects و چرخه حیات	useEffect(() => { console.log(value); }, [value])
Controlled Components	کنترل ورودی‌ها از طریق state	<input value={stateValue} onChange={handleChange} />
Event Handling	مدیریت رویدادهای فرم مانند onChange و onSubmit	<form onSubmit={handleSubmit}>
Reusable Components	کامپوننت‌های قابل استفاده مجدد در فرم‌ها	<FormInput name="email" value={email} onChange={handleChange} />

بهترین روش‌ها در فرم‌های ری‌اکت شامل استفاده از controlled components، مدیریت درست state، و جریان داده قابل پیش‌بینی است. از اشتباهات رایج مانند prop drilling، re-render غیرضروری و تغییر مستقیم state باید اجتناب شود.
برای بهینه‌سازی عملکرد، می‌توان توابع handleChange را memoize کرد یا از debouncing استفاده نمود. اعتبارسنجی و امنیت داده‌ها اهمیت زیادی دارند و باید هنگام جمع‌آوری اطلاعات حساس رعایت شوند. ابزارهایی مانند React Developer Tools برای دیباگ و بررسی flow داده‌ها توصیه می‌شوند.
کامپوننت‌های reusable و ماژولار، مقیاس‌پذیری و قابلیت نگهداری پروژه را افزایش می‌دهند. رعایت conventionهای ری‌اکت، ساختار سلسله‌مراتبی مناسب و encapsulation صحیح state باعث بهبود کیفیت و طول عمر اپلیکیشن می‌شود.

خلاصه و گام‌های بعدی در ری‌اکت (React):
در این آموزش با فرم‌ها در ری‌اکت آشنا شدید، مفاهیم controlled components، مدیریت state، اعتبارسنجی و lifecycle را یاد گرفتید. اکنون می‌توانید فرم‌های قابل استفاده مجدد و امن بسازید و آن‌ها را در پروژه‌های واقعی SPA به کار ببرید.
گام بعدی مطالعه کتابخانه‌های پیشرفته مانند React Hook Form یا Formik است که مدیریت فرم‌ها را ساده‌تر و scalable می‌کنند. توصیه می‌شود ابتدا فرم‌های ساده بسازید و سپس فرم‌های پیچیده با nested components و dynamic fields پیاده‌سازی کنید. این تجربه برای توسعه حرفه‌ای فرم‌ها در ری‌اکت حیاتی است. منابع مستمر مانند مستندات رسمی ری‌اکت و دوره‌های آنلاین می‌توانند یادگیری شما را ادامه دهند.

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

📝 دستورالعمل‌ها

هر سوال را با دقت بخوانید
بهترین پاسخ را برای هر سوال انتخاب کنید
می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
پیشرفت شما در بالا نمایش داده می‌شود

زبان

فرم‌ها در React

اشتراک این آموزش

مثال پایه

مثال کاربردی

📊 جدول مرجع

کلیدواژه‌های مرتبط

🧠 دانش خود را بیازمایید

دانش خود را بیازمایید

📝 دستورالعمل‌ها

🚧 دوره به زودی

Course Name

هنگام در دسترس بودن اطلاع دهید

اکنون در دسترس

Coming Soon

Course Name