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