معالجة الأحداث في React- دليل شامل للتعامل مع الأحداث في React .js

تلعب الأحداث دورًا حيويًا في إنشاء واجهات مستخدم تفاعلية وديناميكية في React. في هذا البرنامج التعليمي ، سوف نستكشف كيفية التعامل مع الأحداث في React إجراءات المستخدم والاستجابة لها بفعالية.

معالجة الأحداث في JSX

React يوفر نظام أحداث تركيبيًا يلتف بأحداث المتصفح الأصلي ويطبيعها عبر متصفحات مختلفة. يمكننا إرفاق معالجات الأحداث مباشرة بعناصر JSX باستخدام onEventName السمة.

مثال:

function handleClick() {  
  console.log("Button clicked!");  
}  
  
<button onClick={handleClick}>Click Me</button>

معالجات الأحداث وكائنات الأحداث

عند بدء تشغيل حدث ما ، React يقوم تلقائيًا بتمرير كائن حدث إلى وظيفة معالج الحدث. يمكننا الوصول إلى هذا الكائن للحصول على معلومات إضافية حول الحدث ، مثل العنصر الهدف وإحداثيات الماوس وما إلى ذلك.

مثال:

function handleMouseOver(event) {  
  console.log("Mouse coordinates:", event.clientX, event.clientY);  
}  
  
<div onMouseOver={handleMouseOver}>Hover over me</div>

معالجات الأحداث الملزمة

عند تمرير معالجات الأحداث على أنها دعائم ، من المهم ربطها بمثيل المكون. هذا يضمن الحفاظ على السياق الصحيح this عند تشغيل الحدث.

مثال:

class MyComponent extends React.Component {  
  handleClick() {  
    console.log("Button clicked!");  
  }  
  
  render() {  
    return <button onClick={this.handleClick.bind(this)}>Click Me</button>;  
  }  
}

انتشار الأحداث ومنع الإجراءات الافتراضية

React يستخدم نظام حدث اصطناعي يتعامل تلقائيًا مع انتشار الحدث. لمنع سلوك المتصفح الافتراضي ، مثل إرسال النموذج أو التنقل عبر الرابط ، يمكننا استدعاء الطريقة event.preventDefault().

مثال:

function handleSubmit(event) {  
  event.preventDefault();  
  console.log("Form submitted!");  
}  
  
<form onSubmit={handleSubmit}>  
  <input type="text" />  
  <button type="submit">Submit</button>  
</form>

من خلال فهم كيفية التعامل مع الأحداث React ، يمكنك إنشاء واجهات مستخدم تفاعلية وسريعة الاستجابة تستجيب بسلاسة لإجراءات المستخدم

فيما يلي قائمة بالأحداث الشائعة في React

1.: onClick يحدث هذا الحدث عند النقر على عنصر.

مثال:

<button onClick={handleClick}>Click Here</button>

2 onChange.: يحدث هذا الحدث عندما تتغير قيمة عنصر الإدخال(الإدخال ، التحديد ، منطقة النص).

مثال:

<input type="text" onChange={handleChange} />

3.: onSubmit يقع هذا الحدث عند تقديم نموذج. مثال:

<form onSubmit={handleSubmit}>  
  <input type="text" />  
  <button type="submit">Submit</button>  
</form>

4.: onMouseEnter يحدث هذا الحدث عندما يدخل مؤشر الماوس عنصرًا.

مثال:

<div onMouseEnter={handleMouseEnter}>Mouse Enter Here</div>

5 onMouseLeave.: يحدث هذا الحدث عندما يترك مؤشر الماوس عنصرًا.

مثال:

<div onMouseLeave={handleMouseLeave}>Mouse Leave Here</div>

6 onKeyDown.: يحدث هذا الحدث عند الضغط على أحد المفاتيح.

مثال:

<input type="text" onKeyDown={handleKeyDown} />

7.: onKeyUp يحدث هذا الحدث عند تحرير مفتاح.

مثال:

<input type="text" onKeyUp={handleKeyUp} />

8.: onFocus يحدث هذا الحدث عندما يتلقى عنصر التركيز.

مثال:

<input type="text" onFocus={handleFocus} />

9.: onBlur يحدث هذا الحدث عندما يفقد عنصر التركيز.

مثال:

<input type="text" onBlur={handleBlur} />

10.: onScroll يحدث هذا الحدث عند تمرير عنصر.

مثال:

<div onScroll={handleScroll}>Scrollable Content</div>

هذه ليست سوى بعض الأمثلة على الأحداث الشائعة في React. يمكنك استخدام هذه الأحداث أو إنشاء أحداث مخصصة وفقًا لاحتياجاتك في تطبيقك React.