React Forms

20 دقیقه Article

فرم‌ها (Forms) 📝

در HTML، عناصر فرم (مثل input) وضعیت خود را نگه می‌دارند. در React، وضعیت فرم معمولاً توسط state کامپوننت مدیریت می‌شود (Controlled Components).

هندل کردن تغییرات

باید یک رویداد onChange تعریف کنید که مقدار جدید را در state ذخیره کند.

{code_block('const [name, setName] = useState("");\n<input value={name} onChange={e => setName(e.target.value)} />')}

در این بخش یاد گرفتید که چگونه منطق برنامه را کنترل کنید و ظاهر آن را تغییر دهید. ترکیب قدرت جاوااسکریپت با انعطاف‌پذیری CSS در React به شما اجازه می‌دهد تجربه‌های کاربری خلاقانه‌ای بسازید.

مدیریت وضعیت (State Management) 🧠

در React، داده‌ها همیشه از بالا به پایین (Top-Down) جریان دارند. اما وقتی برنامه‌ها پیچیده می‌شوند، مدیریت این جریان دشوار می‌شود. اینجاست که ابزارهایی مثل Context API و Redux وارد می‌شوند.

نکته امنیتی: هرگز اطلاعات حساس (مثل رمز عبور یا کلید API) را در کدهای کلاینت‌ساید ذخیره نکنید. کدهای React در مرورگر کاربر قابل مشاهده هستند.

تمرین‌های عملی

برای تثبیت یادگیری این درس تمرین‌های زیر را حل کنید

اینپوت کنترل‌شده Medium

سوال تمرین

یک اینپوت متنی بسازید که مقدارش به متغیر val متصل باشد.

پاسخ تمرین

<input value={val} onChange={(e) => setVal(e.target.value)} />

آماده رفتن به درس بعدی هستید؟

این درس را به پایان رساندید و می‌توانید به درس بعدی بروید.

برای ذخیره پیشرفت وارد شوید

ParsRepo