preventDefault منع السلوك الافتراضي
آخر تحديث: 2026-11-03
preventDefault منع السلوك الافتراضي
تمنع e.preventDefault() الإجراء الافتراضي للمتصفح لحدث، وأبرزه إعادة تحميل الصفحة كاملة بسبب إرسال نموذج. تستدعي نماذج React هذه الدالة في أغلب الأحيان أولاً داخل onSubmit ثم تعالج البيانات عبر الحالة الخاضعة للرقابة، فتحصل على إرسال بلا تحديث للصفحة. إنه سطر واحد، لكن نسيانه من أشيع خلل في نماذج React.
| المجموعة | العرض والحالة |
|---|---|
| النوع | واجهة برمجية |
| منذ الإصدار | أقدم إصدارات React |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
function handleSubmit(e) {
e.preventDefault() // يوقف الإجراء الافتراضي للمتصفح (مثل إعادة تحميل الصفحة)
// تعامل مع الإرسال هنا عبر الحالة
}
<form onSubmit={handleSubmit}>⚙️ المعاملات
| e (event object) | الحدث المُركَّب في React؛ لا يمكن استدعاء preventDefault إلا أثناء تنفيذ المعالج بشكل متزامن، فلا يمكن حفظه واستدعاؤه لاحقاً. |
|---|
القيمة المرجعة：لا قيمة معادة (undefined)؛ وبعد الاستدعاء لا يعود الإجراء الافتراضي للمتصفح لذلك الحدث يحدث.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
نموذج بحث: اكتب كلمة مفتاحية واضغط «Search» فلا تُعاد الصفحة، ويظهر «Searched: xxx» أسفل؛ أما الإرسال بقيمة فارغة فيطلب منك كلمة مفتاحية — وقد نجح منع إعادة التحميل الافتراضية.💡 النقاط الأساسية
⚠️ تحذير منع إعادة تحميل الصفحة يعتمد على e.preventDefault()؛ أما return false فلا يفعل شيئاً على الإطلاق في React.
💡 نصيحة إن أردت ألا يُرسل زر عادي داخل النموذج، فاجعله type="button" لتفادي السلوك الافتراضي أيضاً.
ℹ️ ملاحظة preventDefault يمنع الإجراء الافتراضي، و stopPropagation يمنع صعود الحدث؛ وهما مستقلان ويُختاران بحسب الحاجة.
🏷️ المزيد من العرض والحالة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س لماذا يعيد إرسال نموذج React تحميل الصفحة؟
ج لأن المتصفح له إجراء افتراضي عند إرسال النماذج. استدعِ e.preventDefault() في أول سطر من معالج onSubmit لمنع إعادة التحميل وتعالج البيانات عبر الحالة بدل ذلك.
س ماذا تفعل e.preventDefault()؟
ج تلغي الإجراء الافتراضي للمتصفح للحدث: لا يُعاد تحميل النموذج، ولا ينتقل الوسم a، ولا تظهر قائمة السياق. وهي تلغي الإجراء الافتراضي فقط ولا توقف صعود الحدث.
س ما الفرق بين preventDefault و stopPropagation؟
ج الأولى تمنع «الإجراء الافتراضي» (مثل إعادة تحميل الصفحة)، والثانية تمنع «صعود الحدث» إلى العناصر الأب؛ ولا يؤثر كلٌّ في الآخر ويمكن استدعاؤهما معاً.
