Multi-Step Forms النماذج متعدّدة الخطوات
آخر تحديث: 2026-11-03
Multi-Step Forms النماذج متعدّدة الخطوات
النموذج متعدّد الخطوات يساوي حالة خطوة واحدة، وعرضاً شرطياً للخطوة الحالية، وحالة نموذج واحدة تحمل بيانات كل الخطوات. تتحقّق كل خطوة محلياً قبل أن تسمح لك بالمتابعة، وترسل الخطوة الأخيرة كل شيء دفعة واحدة، وتبديل الخطوات لا يفقد ما كتبه المستخدم. والاحتفاظ بكل حقل في كائن واحد مشترك هو ما يجعل زر الرجوع مجانياً: تتغيّر الخطوة، أما البيانات فتبقى مكانها ويظل المستخدم حراً في تصحيح إجابة سابقة.
| المجموعة | أنماط المكونات |
|---|---|
| النوع | نمط |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
const [step, setStep] = useState(0) // فهرس الخطوة الحالية
const [data, setData] = useState({}) // بيانات النموذج المشتركة بين الخطوات
// اعرض رقم الخطوة "step" بشكل شرطي؛ زرّا الرجوع والتالي يغيّران الخطوة فقطالقيمة المرجعة：لا قيمة معادة؛ فهذه المدخلات تصف نمط برمجة لا دالة.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
لا يتاح زر «Next» إلا بعد ملء الاسم في الخطوة الأولى؛ وبعد إدخال مدينة في الخطوة الثانية يصبح بالإمكان إرسال النموذج؛ وتلخّص شاشة التأكيد بيانات الخطوات الاثنتين، ويبقى مؤشر الخطوة ظاهراً في الأسفل.💡 النقاط الأساسية
💡 نصيحة احتفظ ببيانات كل الخطوات في حالة كائن واحد حتى لا تضيع أبداً عند تبديل الخطوات؛ واستخدام disabled للتحقّق لكل خطوة هو أبسط طريقة لإجبار المستخدم على المرور قبل المتابعة.
ℹ️ ملاحظة مع كثرة الخطوات، استخرج الإعداد في مصفوفة واعرضها بـ map، أو ارفع الخطوة إلى معامل مسار حتى يتمكّن المستخدمون من التنقل والمشاركة في الروابط.
⚠️ تحذير إعادة تحميل الصفحة تفقد الخطوة والبيانات معاً، فاحفظهما في sessionStorage أو غلّفهما بخطّاف مخصّص حين يجب أن يتمكّن المستخدم من الاستئناف لاحقاً.
🏷️ المزيد من أنماط المكونات
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س هل تضيع البيانات عند تبديل الخطوات؟
ج لا. ما دامت كل الخطوات تشترك في حالة النموذج نفسها، لا تتحكّم الخطوة إلا في أي خطوة تُعرض، وتبقى البيانات في مكانها.
س كيف أبني مؤشر تقدّم الخطوات؟
ج مرّر على مصفوفة إعدادات الخطوات وقارن الفهرس بالخطوة الحالية لتحديد تنسيق «مكتملة» أو «نشطة» أو «لم تبدأ».
س كيف أتحقّق من كل شيء قبل الإرسال؟
ج في الخطوة الأخيرة شغّل دالة validate واحدة على بيانات كل الخطوات؛ وإذا أبلغت عن أخطاء، فإن setStep يقفز إلى الخطوة المطابقة لإبرازها.
