Form Inputs عناصر التحكم في النماذج
آخر تحديث: 2026-11-03
Form Inputs عناصر التحكم في النماذج
الحقول النصية ومربعات الاختيار والقوائم المنسدلة وحقول النص متعدد الأسطر تشترك جميعها في منطق value أو checked مع onChange في React، لكنها تقرأ قيمتها من مواضع مختلفة: تقرأ حقول النص من e.target.value، بينما يقرأ مربع الاختيار من e.target.checked. وإتقان هذا الفرق وحده يكفي لتغطية كل حقل نموذج ستصنعه. وبعد أن يملك كل عنصر تحكّم جزءاً واحداً من الحالة، تصير التحقّق والتعطيل والعرض الشرطي كلها مشتقّات مباشرة من تلك الحالة بدل ركام من الشروط المتفرقة.
| المجموعة | أنماط المكونات |
|---|---|
| النوع | نمط |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
<input value={text} onChange={e => setText(e.target.value)} />
<input type="checkbox" checked={ok} onChange={e => setOk(e.target.checked)} />
<select value={city} onChange={e => setCity(e.target.value)}>…</select>القيمة المرجعة：لا قيمة معادة؛ فهذه المدخلات تصف نمط برمجة لا دالة.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
توضّح عناصر التحكم الثلاثة النمط الخاضع للرقابة للنص ومربع الاختيار والقائمة المنسدلة؛ ويجمع السطر في الأسفل كل قيم النموذج الحالية لحظياً.💡 النقاط الأساسية
🏷️ المزيد من أنماط المكونات
💡 حالات ذات صلة
📚 دروس ذات صلة
❓ الأسئلة الشائعة
