في هذا الدرس 6تصفّح المواضيع
في صفحات HTML التقليدية كان تحديد خيار افتراضي داخل القائمة المنسدلة يتطلب وضع سمة selected على أحد عناصر <option> الفرعية. استبدلت React هذا التشتت بواجهة تحكم مركزية نظيفة على العنصر الأب <select> مباشرة.
مرر value={selectedValue} مع onChange={(e) => setSelectedValue(e.target.value)} إلى وسم <select>، وستتكفل المكتبة بإبراز الخيار المطابق تلقائياً.
function LevelFilter() {
const [level, setLevel] = useState('intermediate');
return (
<select value={level}
onChange={(e) => setLevel(e.target.value)}>
<option value="beginner">Beginner</option>
<option value="intermediate">Intermediate</option>
<option value="advanced">Advanced</option>
</select>
);
}تمثل خانة الاختيار المنفردة — مثل الموافقة على الشروط أو إظهار المنتجات المتوفرة فقط — قيمة منطقية صريحة (true أو false) وليست نصاً؛ لذلك نربط حالتها بخاصية checked بدلاً من value.
وداخل معالج التغيير اقرأ e.target.checked دائماً؛ فقراءة e.target.value خطأ شائع يعيد النص الثابت "on" سواء كانت الخانة محددة أم غير محددة.
function EnrollmentConsent() {
const [ok, setOk] = useState(false);
return (
<form>
<input type="checkbox" checked={ok}
onChange={(e) => setOk(e.target.checked)} />
<span>Accept honor code</span>
<button disabled={!ok}>Start Exam</button>
</form>
);
}عندما يُتاح للمستخدم اختيار عنصر أو أكثر من قائمة متعددة — كاختيار المهارات البرمجية أو قنوات التنبيه — نخزن المعرّفات المختارة داخل مصفوفة حالة مثل useState(['jsx']).
تحسب كل خانة حالتها عبر skills.includes(item.id)، وعند النقر نحدّث المصفوفة بنقاء دون تعديل مباشر: نضيف المعرّف بمعامل الانتشار إذا حُددت الخانة، أو نستبعده بدالة filter() إذا أُلغي تحديدها.
function toggleSkill(id, isChecked) {
setSelected((prev) =>
isChecked
? [...prev, id]
: prev.filter((item) => item !== id)
);
}حتى عندما يحمل الحقل النوع type="number" أو شريط تمرير type="range"، فإن المتصفح يعيد قيمة e.target.value دائماً كسلسلة نصية! فجمع seats + 1 حين تكون القيمة النصية "3" ينتج دمجاً نصياً "31" بدلاً من الرقم 4.
حوّل القيمة صراحةً داخل معالج التغيير عبر دالة Number(e.target.value) قبل إجراء أي حسابات للأسعار أو الكميات.
function TeamCalculator() {
const [seats, setSeats] = useState(5);
const sync = (e) => setSeats(Number(e.target.value));
return (
<div>
<input type="range" min={1} max={20}
value={seats} onChange={sync} />
<p>{seats} seats = ${seats * 15}/mo</p>
</div>
);
}يمنحك إتقان أنماط الربط الخمسة هذه سيطرة تصريحية كاملة على لوحات الإعدادات وفلاتر المتاجر ونماذج التسجيل المتقدمة دون أي استعلام يدوي من شجرة المتصفح. اعتمد الجدول المرجعي التالي عند بناء أي نموذج:
| عنصر النموذج | خاصية ربط الحالة | تعبير قراءة التغيير في onChange |
|---|---|---|
| القائمة المنسدلة select | خاصية value={selectedOption} | تحديث القيمة عبر e.target.value |
| خانة الاختيار المفردة | خاصية checked={isAgreed} | قراءة المنطق عبر e.target.checked |
| مجموعة خانات متعددة | فحص checked={list.includes(id)} | إضافة بالانتشار أو حذف بدالة filter |
| أزرار radio وشريط range | مقارنة checked أو تمرير value | قراءة النص أو تحويله بدالة Number |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس التحكم في قوائم select عبر خاصية value على العنصر الأب، وربط خانات الاختيار المفردة والمتعددة عبر خاصية checked، ومزامنة أزرار الانتقاء الحصرية وتحويل مدخلات الأرقام بأمان. الخطوة التالية: انتقل الآن إلى الدرس رقم 24 «إدارة النماذج متعددة الحقول والتحقق من المدخلات» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Controlled Select القائمة المنسدلة المحكومة
- عنصر قائمة منسدلة يتحدد خياره النشط بتمرير خاصيتي value وonChange للعنصر الأب مباشرة.
- للمراجعة
- 02 Checked Prop خاصية التحديد checked
- الخاصية المنطقية المعتمدة في JSX للتحكم في حالة تفعيل خانة الاختيار أو زر الانتقاء.
- للمراجعة
- 03 Radio Group مجموعة أزرار الانتقاء
- مجموعة أزرار تشترك في سمة الاسم وتسمح باختيار قيمة واحدة فقط تطابق متغير الحالة.
- للمراجعة
- 04 Numeric Coercion التحويل الرقمي الصريح
- تغليف القيمة النصية القادمة من الحقل بدالة Number لضمان إجراء عمليات حسابية صحيحة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 RTL RTL
- Right-to-Left
- اتجاه تخطيط الواجهات من اليمين إلى اليسار للغة العربية والذي يدار غالباً بقوائم الإعدادات.
- للمراجعة
- 02 LTR LTR
- Left-to-Right
- اتجاه العرض من اليسار إلى اليمين المعتمد للغة الإنجليزية والشفرات البرمجية.
- للمراجعة
- 03 UI UI
- User Interface
- عناصر التحكم البصرية كالقوائم والخانات وأشرطة التمرير التي يضبط المستخدم عبرها الحالة.
- للمراجعة
- 04 HTML HTML
- HyperText Markup Language
- لغة توصيف المستندات التي توحّد React طريقة التحكم في عناصر نماذجها القياسية.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح مثال SkillPicker في محرر التجريب وأضف زراً يمرر جميع معرّفات القائمة لدالة الحالة لتحديدها دفعة واحدة.
-
افتح مثال TeamCalculator وأضف زراً يزيد مقعداً واحداً وتأكد من صحته الحسابية بفضل تخزين القيمة كرقم.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي10 أسئلة تنتظرك ＋
كيف تحدد الخيار النشط حالياً داخل قائمة select محكومة في React؟
بتمرير خاصية value={stateVar} مباشرة إلى وسم select الأب بدلاً من وضع سمة selected على الخيارات.
أي خاصية في كائن الحدث تحمل القيمة المنطقية لخانة الاختيار داخل معالج onChange؟
تعيد خاصية e.target.checked قيمة منطقية صواب أو خطأ بينما تعيد value النص الثابت "on".
قراءة e.target.value لخانة اختيار قياسية بلا سمة value تعيد النص "on" حتى عند إلغاء تحديد الخانة.
صواب؛ ولذلك يجب الاعتماد دائماً على e.target.checked مع خانات الاختيار.
ما الطريقة النقية الصحيحة لإزالة معرّف عنصر أُلغي تحديده من مصفوفة خانات الاختيار المتعددة؟
تنشئ دالة filter مصفوفة جديدة تستبعد المعرّف المطلوب دون تعديل المصفوفة الأصلية.
كيف تُحسب قيمة خاصية checked لكل زر داخل مجموعة أزرار انتقاء radio محكومة؟
بمقارنة متغير الحالة الحالي بقيمة ذلك الزر تحديداً مثل checked={plan === "annual"}.
توحيد خاصية name بين أزرار الانتقاء المترابطة يمكّن المستخدم من التنقل بينها بأسهم لوحة المفاتيح.
صواب؛ تعتمد إتاحة لوحة المفاتيح القياسية لأزرار الانتقاء على اشتراكها في نفس خاصية name.
ما نوع البيانات الذي تعيده الخاصية e.target.value من حقول number وrange في المتصفح؟
تعيد خاصية القيمة في عناصر DOM سلسلة نصية دائماً ما لم تُحوّل برمجياً.
إذا خُزنت القيمة النصية "4" دون تحويل رقمي، فما نتيجة التعبير count + 1 في JavaScript؟
يقوم معامل الجمع بدمج النصوص عند وجود طرف نصي فتكون النتيجة "41" بدلاً من 5.
يمكن إدارة مجموعة خانات اختيار متعددة عبر مصفوفة في useState تفحص العضوية بدالة includes وتحدثها بالانتشار والتصفية.
صواب؛ المصفوفة غير القابلة للتعديل المباشر هي النمط القياسي لإدارة الخيارات المتعددة في React.
أي ثنائي من عناصر HTML الدلالية يُعد الأنسب لتغليف مجموعة خانات اختيار أو أزرار انتقاء لدعم قارئات الشاشة؟
يوفر العنصران fieldset وlegend تجميعاً دلالياً واضحاً يقرأ عنوان المجموعة للمستخدمين المكفوفين.