شرح صفوف ومحتوى الفقرة
تمتلك بعض عناصر المتصفح سلوكاً تلقائياً مدمجاً؛ فإرسال عنصر <form> يعيد تحميل الصفحة كاملةً. وهنا نستدعي الدالة e.preventDefault() لإلغاء السلوك الافتراضي للمتصفح مع بقاء التطبيق حياً وسريعاً. احذر دائماً من الخلط بين إيقاف الانتشار ومنع السلوك الافتراضي كما يوضح الجدول المقارن التالي:
| الدالة أو الخاصية | الوظيفة الهندسية الدقيقة | حالة الاستخدام العملية في React |
|---|---|---|
e.target | أعمق عنصر فرعي نقر عليه المستخدم فعلياً | معرفة العنصر الداخلي المحدد الذي استقبل الضغطة |
e.currentTarget | العنصر الحامل لدالة المعالجة الحالية في JSX | قراءة بيانات عنصر زر يضم أيقونة ونصاً بداخله |
e.stopPropagation() | إيقاف صعود الحدث إلى معالجات المكونات الأب | عزل زر الحفظ أو الحذف داخل بطاقة قابلة للنقر |
e.preventDefault() | إلغاء السلوك الافتراضي المدمج في المتصفح | منع إعادة تحميل الصفحة عند إرسال نماذج <form> |
function NewsletterForm({ onSubmitted }) {
function handleSubmit(e) {
e.preventDefault();
onSubmitted('Subscribed without page reload!');
}
return (
<form onSubmit={handleSubmit}>
<button type="submit">Subscribe</button>
</form>
);
}ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
استكشفت في هذا الدرس كائن الحدث الاصطناعي الموحد SyntheticEvent، وفرقت عملياً بين target وcurrentTarget، وتتبعت مرحلتي الالتقاط والصعود عبر شجرة المكونات مع عزل النقرات الفرعية بـ stopPropagation ومنع تحديث الصفحة بـ preventDefault. الخطوة التالية: انتقل الآن إلى الدرس رقم 18 «ذاكرة المكون عبر useState وقواعد الخطافات» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.