Dynamic Forms الحقول الديناميكية في النماذج
آخر تحديث: 2026-11-03
Dynamic Forms الحقول الديناميكية في النماذج
حين لا يكون عدد الحقول ثابتاً، قدّ العرض من مصفوفة محفوظة في الحالة: كل حقل يخزّن سجلاً واحداً، وإضافة الحقول وحذفها يعنيان إضافة عناصر إلى المصفوفة وحذفها منها، وتحديث حقل واحد يعني المرور على المصفوفة واستبدال السجل الذي تطابق معرّفه. وبمفاتيح ثابتة، يعيد React استخدام حالة الإدخال لكل صف بشكل صحيح. والمصفوفة هي مصدر الحقيقة الوحيد، فتكون الإضافة والتعديل والحذف ثلاثة تحديثات صغيرة نقية بدل ثلاث قطع حالة منفصلة تحتاج إلى مطابقة.
| المجموعة | أنماط المكونات |
|---|---|
| النوع | نمط |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
const [rows, setRows] = useState([{ id: 1, name: '' }])
setRows([...rows, { id: nextId(), name: '' }]) // أضف صفاً
setRows(rows.filter(r => r.id !== id)) // احذف صفاً
setRows(rows.map(r => r.id === id ? { ...r, name: v } : r)) // عدّل خلية واحدةالقيمة المرجعة：لا قيمة معادة؛ فهذه المدخلات تصف نمط برمجة لا دالة.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
صفّ إدخال واحد افتراضياً؛ والضغط على «+ Add row» يضيف صفاً و«Remove» يحذف صفاً، ولكل صف إدخاله الخاص، والعدد في الأسفل يتحدّث لحظياً.💡 النقاط الأساسية
💡 نصيحة افهرس صفوف القائمة بمعرّف تجاري بدل فهرس المصفوفة، وإلا فإن حذف صف من المنتصف يزيح الفهارس وتختلط مدخلات بقية الصفوف.
ℹ️ ملاحظة أبقِ تحديثات المصفوفة غير قابلة للتعديل: filter و map يعيدان مصفوفات جديدة، وهذا ما يجعل React يلاحظ التغيّر ويعيد العرض.
⚠️ تحذير لا تنسَ type="button" على أزرار الإضافة والحذف داخل النموذج، وإلا أثّرت السلوك الافتراضي لإرسال النموذج.
🏷️ المزيد من أنماط المكونات
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س بعد حذف صف تختلط قيم بقية الصفوف. لماذا؟
ج لأن الـ key كان فهرس المصفوفة: بعد الحذف تزيح الفهارس، فيسلّم React الحقل إلى السجل الخطأ. استخدم معرّفاً تجارياً ثابتاً كـ key.
س هل ينبغي أن يحصل كل صف على useState خاص به؟
ج لا. عدد الصفوف يتغيّر ديناميكياً، فمصفوفة حالة واحدة مع تحديثات غير قابلة للتعديل لكل معرّف هي أبسط حل — وعدد الخطافات لا يمكن أن يتغيّر على أي حال.
س بماذا أولّد معرّف الصف الجديد؟
ج تعمل Date.now() أو عدّاد متزايد أو crypto.randomUUID() كلها، ما دام المعرّف يبقى فريداً وثابتاً داخل القائمة نفسها.
