لمنع تداول الحدث (event bubbling) في المكونات المتداخلة في React عند النقر (click)، يمكنك استخدام e.stopPropagation() في مكان الحدث onClick للعنصر الفرعي
-
-
-
في مثالك، يمكنك تحديث الكود ليبدو كما يلي:
jsxclass List extends React.Component {
constructor(props) {
super(props);
}
handleClick() {
// do something
}
render() {
return (
<ul
onClick={(e) => {
console.log('parent');
this.handleClick();
}}
>
<li
onClick={(e) => {
e.stopPropagation(); // منع تداول الحدث
console.log('child');
this.handleClick();
}}
>
li>
ul>
)
}
}
بهذا التحديث، عند النقر على العنصر الفرعي
أتمنى أن تكون هذه المعلومات مفيدة لك!
المزيد من المعلومات
في React، عندما تنشئ مكونًا يحتوي على عناصر متداخلة وتضيف معالجات الحدث onClick لهذه العناصر، يمكن للحدث أن يتداول (ينتشر) من العنصر الفرعي إلى العنصر الأعلى. هذا يعني أن النقر على العنصر الفرعي سيؤدي إلى تنفيذ معالج الحدث للعنصر الفرعي ومن ثم معالج الحدث للعنصر الأعلى.
لمنع تداول الحدث، يمكنك استخدام e.stopPropagation() في معالج الحدث الخاص بالعنصر الفرعي. هذا يمنع الحدث من الوصول إلى العناصر الأعلى في شجرة العناصر.
بالنسبة للفرق بين e.preventDefault() و e.stopPropagation():
-
e.preventDefault()يمنع السلوك الافتراضي لحدث معين. على سبيل المثال، إذا كنت تستخدملإنشاء رابط وترغب في منع التنقل عند النقر على الرابط، يمكنك استخدامe.preventDefault()لمنع هذا السلوك الافتراضي. -
e.stopPropagation()يمنع تداول الحدث. عندما تقوم بإيقاف تداول الحدث في عنصر فرعي، لن يتم تمرير الحدث إلى العناصر الأعلى في الهرم، وسيتم معالجته فقط في العنصر الذي تم النقر عليه.
إذا كنت تريد المزيد من المعلومات أو تحتاج إلى شرح إضافي، فلا تتردد في طرح أسئلتك!
