في هذا الدرس 6تصفّح المواضيع
تتيح لك مكتبة React الاستجابة لتفاعلات المستخدم مثل النقر والتركيز وحركة المؤشر عبر خصائص أحداث بصيغة الجمل camelCase مثل onClick وonMouseEnter وonFocus. يقوم الأسلوب القياسي على خطوتين منظمتين: تعريف دالة معالجة داخل جسم المكون تبدأ عادةً بالسابقة handle، ثم تمريرها داخل قوسين معقوفين للعنصر المطلوب.
بخلاف نصوص onclick التقليدية في HTML الخام، تستقبل خصائص الأحداث في React مراجع دوال JavaScript حقيقية معزولة بأمان داخل نطاق المكون.
function PublishToolbar({ onStatus }) {
function handlePublish() {
onStatus('Published lesson cleanly!');
}
return (
<button type="button" onClick={handlePublish}>
Publish Lesson
</button>
);
}يتمثل الخطأ الأكثر شيوعاً عند التعامل مع الأحداث في وضع قوسي الاستدعاء بجانب اسم الدالة داخل JSX. كتابة onClick={handleReset} تمرر مرجع الدالة ذاته لتحتفظ به React وتستدعيه عند النقر فقط، أما كتابة onClick={handleReset()} فتشغّل الدالة handleReset() فوراً لحظة رسم المكون ثم تسلّم ناتجها الفارغ undefined للزر فلا يستجيب لأي نقرة لاحقة.
تنطبق القاعدة ذاتها على الدوال المختصرة؛ إذ نكتب غلافاً سهمياً onClick={() => onNotify('Saved')} حتى نؤجل التنفيذ إلى لحظة النقر الفعلية.
function QuickActions({ onLog }) {
function handleArchive() {
onLog('Archived item on click!');
}
return (
<div className="rx-row">
<button onClick={handleArchive}>Archive</button>
<button onClick={() => onLog('Pin')}>Pin</button>
</div>
);
}تبرز أهمية الدوال السهمية المباشرة عند عرض مجموعة أزرار أو بطاقات تحتاج كل واحدة منها لتمرير معرّف خاص أو قيمة محددة لدالة مشتركة. فكتابة onClick={() => handleSelectTrack(track.id)} تنشئ دالة خفيفة لكل عنصر تحفظ قيمة track.id الخاصة به وتمررها لحظة النقر دون أي تنفيذ مبكر.
function TrackPicker({ tracks, onPick }) {
return tracks.map((t) => (
<button key={t.id} onClick={() => onPick(t.id)}>
Select {t.title}
</button>
));
}بما أن دوال معالجة الأحداث تُعرّف داخل جسم المكون الدالي، فإن آلية الإغلاق اللفظي (Lexical Closure) في JavaScript تمنحها وصولاً تلقائياً ومباشراً لجميع خصائص المكون props ومتغيراته المشتقة دون الحاجة لتمريرها يدوياً أو ربط مؤشر إضافي.
تعتمد أنظمة التصميم الاحترافية على بناء مكونات واجهة عامة مثل <ActionButton> تضبط المظهر البصري وإتاحة لوحة المفاتيح دون فرض منطق عمل ثابت بداخلها، ثم يمرر المكون الأب السلوك المطلوب كخاصية مثل onPlay أو onUpload ليربطها الابن بعنصر <button> الفعلي.
function ActionBtn({ onRun, children }) {
return <button onClick={onRun}>{children}</button>;
}
function MediaBar({ onReport }) {
return (
<ActionBtn onRun={() => onReport('Play')}>
Play Video
</ActionBtn>
);
}يضمن الالتزام بأعراف التسمية القياسية في مجتمع React وضوح شجرة المكونات مهما كبر حجم المشروع؛ فتبدأ خصائص الأحداث المستقبَلة في المكون بالسابقة on متبوعة بحرف كبير مثل onSelectLesson، بينما تبدأ الدوال المعالجة الداخلية بالسابقة handle مثل handleSelectLesson. يلخص الجدول التالي أنماط ربط الأحداث:
| النمط البرمجي | المثال في JSX | السلوك الفعلي وقت التشغيل |
|---|---|---|
| تمرير مرجع الدالة | onClick={handleSave} | يمرر الدالة بأمان لتشتغل عند نقر المستخدم فقط |
| الاستدعاء المبكر الخاطئ | onClick={handleSave()} | يشغّل الدالة فوراً أثناء الرسم قبل حدوث أي نقرة |
| الغلاف السهمي المختصر | onClick={() => onPick(id)} | يمرر معاملات مخصصة للعنصر عند لحظة التفاعل |
| خاصية حدث مخصصة | <Card onArchive={handleArchive} /> | يفصل تصميم المكون الفرعي عن منطق المكون الأب |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعلمت في هذا الدرس كيفية ربط خصائص الأحداث بصيغة camelCase، وتمرير مراجع الدوال دون استدعاء مبكر أثناء التصيير، وتمرير المعاملات بالدوال السهمية، وقراءة الخصائص داخل نطاق الدالة وتصميم خصائص الأحداث بالأعراف القياسية. الخطوة التالية: انتقل الآن إلى الدرس رقم 17 «الأحداث الاصطناعية وانتشار الحدث والسلوك الافتراضي» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Event Handler معالج الحدث
- دالة JavaScript تُمرر لخاصية حدث في عنصر JSX ليجري استدعاؤها عند وقوع تفاعل من المستخدم مثل النقر أو الكتابة.
- للمراجعة
- 02 Function Reference مرجع الدالة
- تمرير قيمة الدالة باسمها مجرداً من قوسي الاستدعاء كي تحتفظ بها React وتشغلها لاحقاً عند وقوع الحدث.
- للمراجعة
- 03 Lexical Closure الإغلاق اللفظي
- آلية في JavaScript تتيح للدالة المعرّفة داخل المكون الوصول التلقائي لخصائصه ومتغيراته المحيطة.
- للمراجعة
- 04 Event Handler Prop خاصية معالجة الحدث
- خاصية مخصصة تبدأ بالسابقة on يمرر عبرها المكون الأب دالة استجابة للمكون الابن القابل لإعادة الاستخدام.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 DOM DOM
- Document Object Model
- شجرة عناصر المتصفح التي تلتقط تفاعلات المستخدم وتربطها React بدوال المكونات.
- للمراجعة
- 02 JSX JSX
- JavaScript XML
- صياغة تتيح تمرير مراجع دوال JavaScript مباشرة لخصائص الأحداث المكتوبة بأسلوب camelCase.
- للمراجعة
- 03 UI UI
- User Interface
- عناصر التحكم التفاعلية المرئية كالأزرار والقوائم التي يستجيب التطبيق من خلالها للمستخدم.
- للمراجعة
- 04 WAI WAI
- Web Accessibility Initiative
- معايير الإتاحة القياسية التي توصي بربط أحداث النقر بعناصر الأزرار الدلالية لدعم لوحة المفاتيح.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح مثال اختيار المسارات في محرر التجريب، وأضف مساراً رابعاً لمصفوفة TRACKS وتأكد من ظهور معرّفه وعنوانه عند النقر.
-
في مثال شريط الوسائط بمحرر التجريب، أضف مكون ActionButton ثالثاً بعنوان مشاركة الرابط يستدعي onReport برسالة مخصصة.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي10 أسئلة تنتظرك ＋
ماذا يحدث عند كتابة الصيغة onClick={handleDelete()} بأقواس الاستدعاء داخل JSX؟
وجود قوسي الاستدعاء يشغّل الدالة فوراً أثناء رسم المكون بدلاً من انتظار نقر المستخدم على الزر.
أي صيغة كتابة صحيحة لربط حدث النقر بعنصر زر داخل JSX في React؟
تُكتب خصائص الأحداث على عناصر JSX بصيغة الجمل camelCase مثل onClick.
تغليف الاستدعاء بدالة سهمية مثل onClick={() => onSelect(item.id)} يؤجل التنفيذ بأمان إلى لحظة نقر المستخدم.
صواب؛ فالتعبير السهمي ينشئ دالة جديدة ولا ينفذ استدعاء onSelect إلا عند وقوع النقرة.
تستطيع دالة الحدث المعرّفة داخل المكون الدالي قراءة خصائص props مباشرةً دون ربط يدوي للمؤشر this.
صواب؛ إذ يتيح الإغلاق الدالي في JavaScript قراءة جميع خصائص المكون المحيطة مباشرةً.
وفق العرف القياسي في React، كيف نسمي خصائص الأحداث المخصصة والدوال المعالجة لها؟
تبدأ خصائص الأحداث بالسابقة on مثل onUpload، وتبدأ الدوال المعالجة بالسابقة handle مثل handleUpload.
عند بناء مكون زر مخصص <ToolbarButton onAction={handleRun} /> يعرض عنصر <button> داخلياً، لأي خاصية نمرر onAction؟
يفهم عنصر المتصفح الأصلي <button> خاصية الحدث القياسية onClick، لذا نكتب <button onClick={onAction}>.
بخلاف جسم تصيير المكون، يُسمح لدوال معالجة الأحداث بتنفيذ تأثيرات جانبية لأنها لا تعمل أثناء الرسم.
صواب؛ فمعالجات الأحداث تعمل استجابةً لتفاعل المستخدم ولا تعرقل نقاء حساب الواجهة.
لماذا يُفضّل هندسياً استخدام <button type="button" onClick={handleOpen}> بدلاً من <div onClick={handleOpen}> للأزرار التفاعلية؟
توفر عناصر button الدلالية تركيز لوحة المفاتيح والتفعيل بزري Enter وSpace تلقائياً لدعم الإتاحة.
أي سطر برمجي مما يلي يقع في خطأ تشغيل onNotify("Copied") أثناء التصيير بدلاً من انتظار النقر؟
كتابة onClick={onNotify("Copied")} بدون دالة حاضنة ينفذ الاستدعاء فوراً أثناء تقييم JSX.
يمكن لمكون React مخصص مثل <LessonCard /> استقبال عدة خصائص أحداث مستقلة مثل onBookmark وonShare في آنٍ واحد.
صواب؛ إذ يمكن للمكون تعريف عدة خصائص استجابة واضحة لكل زر فرعي بداخله.