عرض مصدر React/handling events

<noinclude>{{DISPLAYTITLE:معالجة الأحداث في React}}</noinclude>
تُشبه معالجة الأحداث لعناصر React معالجة الأحداث لعناصر DOM، ولكن هنالك فروق تتعلّق بالصياغة:
* تُسمَّى أحداث React باستخدام حالة الأحرف camelCase (أي عند وجود اسم مؤلف من عدة كلمات نجعل الحرف الأول من الكلمة الأولى بالشكل الصغير أمّا باقي الكلمات نجعل حرفها الأول بالشكل الكبير) بدلًا من استخدام الشكل الصغير للأحرف.
* نُمرِّر في JSX دالة كمُعالِج للأحداث، بدلًا من سلسلة نصيّة.
على سبيل المثال لنأخذ شيفرة HTML التالية:<syntaxhighlight lang="javascript">
<button onclick="activateLasers()">
  تفعيل الليزر
</button>

</syntaxhighlight>تكون الشيفرة السابقة مختلفة قليلًا في React:<syntaxhighlight lang="javascript">
<button onClick={activateLasers}>
  تفعيل الليزر
</button>

</syntaxhighlight>من الفروق الأخرى أنّه لا يمكنك إعادة القيمة <code>false</code> لمنع السلوك الافتراضي في React، بل يجب عليك أن تستدعي <code>preventDefault</code> بشكل صريح، فمثلًا في HTML لمنع السلوك الافتراضي للروابط في فتح صفحة جديدة بإمكانك كتابة ما يلي:<syntaxhighlight lang="html">
<a href="#" onclick="console.log('ضُغِط على الرابط بنجاح'); return false">
  اضغط هنا
</a>

</syntaxhighlight>أمّا في React فنكتب بدلًا من ذلك ما يلي:<syntaxhighlight lang="javascript">
function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('ضُغِط على الرابط بنجاح');
  }

  return (
    <a href="#" onClick={handleClick}>
      اضغط هنا
    </a>
  );
}

</syntaxhighlight>يُمثِّل المتغيّر <code>e</code> هنا حدثًا مُصطنعًا، حيث تُعرِّف React هذه الأحداث المُصطنعة وفق [https://www.w3.org/TR/DOM-Level-3-Events/ معايير W3C]، بحيث لا نهتم بمشاكل التوافقيّة بين المتصفحات. للمزيد حول الأحداث المصطنعة انتقل إلى مرجع [[React/events|الأحداث في React]].

ينبغي بشكل عام عند استخدام React ألّا تحتاج إلى استدعاء <code>addEventListener</code> لإضافة مُستمِع للأحداث إلى عنصر DOM بعد إنشائه، وبدلًا من ذلك نُضيف مُستمِعًا للأحداث عند تصيير العنصر (Rendering Element).

عند تعريف المُكوِّنات باستخدام [[JavaScript/class|الأصناف]] هنالك نمط شائع لمعالج الأحداث ليكون تابعًا ضمن الصنف، ففي المثال التالي يعرض المُكوِّن <code>Toggle</code> زرًّا يُتيح للمستخدم بأن يقلب بين الحالتين <code>"ON"</code> و <code>"OFF"</code>:<syntaxhighlight lang="javascript">
class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    
	// يكون هذا الربط ضروريًّا لكي تعمل this في رد النداء
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

</syntaxhighlight>[http://codepen.io/gaearon/pen/xEmzGg?editors=0010 جرِّب هذا المثال على موقع CodePen].

يجب أن تنتبه إلى معنى <code>this</code> في ردود نداء JSX، ففي JavaScript لا [[JavaScript/Function/bind|تُربَط]] توابع الصّنف بشكل افتراضي عن طريق التابع <code>bind()</code>‎، وإن نسيت أن تربط وتُمرِّر <code>this.handleClick</code> إلى <code>onClick</code>، فستكون قيمة <code>this</code> غير مُعرَّفة عند استدعاء الدالة.

لا يُعدُّ هذا سلوكًا مرتبطًا بـ React، بل هو جزء من [[JavaScript/this#.D8.B3.D9.8A.D8.A7.D9.82 .D8.A7.D9.84.D8.AF.D9.88.D8.A7.D9.84|سياق الدوال في JavaScript]]. بشكل عام إن أشرت إلى التابع بدون استخدام الأقواس () بعده، مثل ‎onClick={this.handleClick}‎، فيجب أن تربط ذلك التابع.

إن كان استدعاء التابع [[JavaScript/this#.D8.A7.D9.84.D8.AF.D8.A7.D9.84.D8.A9 bind|bind()]]‎ يزعجك، فهناك طريقتان للالتفاف حول استعماله، إن كنت تستخدم صياغة حقول الصنف العامة التجريبيّة فبإمكانك استخدام حقول الصنف لربط ردود النداء بشكل صحيح: