نماذج متحكم بها مع حقول إدخال متعددة
أنشئ نموذجًا يحوي حقول إدخال متعددة متحكمًا بها؛ وخزّن كل قيمة في الحالة وعالج الإرسال في React.
نماذج متحكم بها مع حقول إدخال متعددة درس مجاني في React Academy على CoddyKit. هذا هو الدرس 1 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 3 دروس في المجموع.
مقدمة
الهدف: أنشئ نموذجًا يحتوي على عدة حقول إدخال مُتحكَّم بها. تحصل كل قيمة إدخال على value من الحالة، وتُحدَّث عبر onChange.
تذكير بالحقول المُتحكَّم بها
ترتبط قيمة value في حقل الإدخال المُتحكَّم به بحالة React. ويعالج onChange كل تغيير ويحدّث الحالة.
عرض توضيحي: نموذج مُتحكَّم به
يستخدم كل حقل إدخال value وonChange؛ وتتتبّع الحالة كلا الحقلين. ويعالج React عملية الإرسال.
<div id="root"></div>
الفوائد
فوائد النماذج المُتحكَّم بها:
- حالة React هي المصدر الوحيد للحقيقة
- سهولة التحقق
- واجهة مستخدم يمكن التنبؤ بها
أساسيات التحقق
يمكن إجراء التحقق عند الإرسال أو مع كل تغيير. وتتيح الحقول المُتحكَّم بها فحص القيم فورًا وعرض رسائل الخطأ.
نصائح
نصائح:
- اربط value بالحالة دائمًا
- استخدم معالجًا واحدًا لحقول إدخال متعددة بالاعتماد على name
- امنع إعادة تحميل الصفحة الناتجة عن إرسال النموذج افتراضيًا
التحقق من النموذج المُتحكَّم به
مراجعة
مراجعة: اربط كل حقل إدخال في النماذج المُتحكَّم بها بحالة React. عالج التغييرات باستخدام onChange وأبقِ React المصدر الوحيد للحقيقة.
الأسئلة الشائعة
هل درس «نماذج متحكم بها مع حقول إدخال متعددة» مجاني؟
نعم — نص درس «نماذج متحكم بها مع حقول إدخال متعددة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 3 دروس في المجموع.
ماذا ستتعلم في «نماذج متحكم بها مع حقول إدخال متعددة»؟
أنشئ نموذجًا يحوي حقول إدخال متعددة متحكمًا بها؛ وخزّن كل قيمة في الحالة وعالج الإرسال في React. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟
لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 3.
كم من الوقت يستغرق درس «نماذج متحكم بها مع حقول إدخال متعددة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟
نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- نماذج متحكم بها مع حقول إدخال متعددة
- أنماط التحقق الأساسية ومعالجة الإرسال
- رسائل الخطأ وحالات Touched/Dirty (دون مكتبات)