Controlled Components المكوّنات الخاضعة للرقابة
آخر تحديث: 2026-11-03
Controlled Components المكوّنات الخاضعة للرقابة
المكوّن الخاضع للرقابة هو الذي تقود قيمته حالة React: تُربط القيمة بالحالة، وتكتب onChange القيمة الجديدة مرة أخرى داخل الحالة، فيُغلق ذلك حلقة تدفّق البيانات أحادي الاتجاه مع تغذية راجعة من الحدث. وهو النمط الافتراضي لنماذج React، ويبقي القيمة الحالية صالحة continuously للتدقيق، قابلة للإرسال، وقادرة على قيادة حقول أخرى دون المساس بال DOM أسلوباً إلزامياً. ولأن الحالة هي مصدر الحقيقة الوحيد، يمكن إعادة ضبط أي حقل خاضع للرقابة أو ملؤه مسبقاً أو مقارنته بحقوله المجاورة في أي لحظة.
| المجموعة | أنماط المكونات |
|---|---|
| النوع | نمط |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
<input
value={name} // الحالة هي التي تقود العرض
onChange={e => setName(e.target.value)} // الكتابة تعيد القيمة إلى الحالة
/>القيمة المرجعة：لا قيمة معادة؛ فهذه المدخلات تصف نمط برمجة لا دالة.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
بعد كتابة «Alice» واختيار «Advanced»، يعرض السطر أدناه «Hello, Alice (Advanced)» فوراً — فكل ضغطة مفتاح تحدّث الحالة مرة واحدة، وتُعرض الواجهة تزامناً معها.💡 النقاط الأساسية
🏷️ المزيد من أنماط المكونات
💡 حالات ذات صلة
📚 دروس ذات صلة
❓ الأسئلة الشائعة
