Translating 'handling-events.md'

content/docs/handling-events.md

@@ -1,43 +1,43 @@
 ---
 id: handling-events
-title: Handling Events
+title: معالجة الأحداث
 permalink: docs/handling-events.html
 prev: state-and-lifecycle.html
 next: conditional-rendering.html
 redirect_from:
   - "docs/events-ko-KR.html"
 ---
 
-Handling events with React elements is very similar to handling events on DOM elements. There are some syntactic differences:
+تُشبه معالجة الأحداث لعناصر React معالجة الأحداث لعناصر DOM، ولكن هنالك فروق تتعلّق بالصياغة:
 
-* React events are named using camelCase, rather than lowercase.
-* With JSX you pass a function as the event handler, rather than a string.
+* تُسمَّى أحداث React باستخدام حالة الأحرف camelCase (أي عند وجود اسم مؤلف من عدة كلمات نجعل الحرف الأول من الكلمة الأولى بالشكل الصغير أمّا باقي الكلمات نجعل حرفها الأول بالشكل الكبير) بدلًا من استخدام الشكل الصغير للأحرف.
+* نُمرِّر في JSX دالة كمُعالِج للأحداث، بدلًا من سلسلة نصيّة.  
 
-For example, the HTML:
+على سبيل المثال لنأخذ شيفرة HTML التالية:
 
 ```html
 <button onclick="activateLasers()">
   Activate Lasers
 </button>
 ```
 
-is slightly different in React:
+تكون الشيفرة السابقة مختلفة قليلًا في React:
 
 ```js{1}
 <button onClick={activateLasers}>
   Activate Lasers
 </button>
 ```
 
-Another difference is that you cannot return `false` to prevent default behavior in React. You must call `preventDefault` explicitly. For example, with plain HTML, to prevent the default link behavior of opening a new page, you can write:
+من الفروق الأخرى أنّه لا يمكنك إعادة القيمة `false` لمنع السلوك الافتراضي في React، بل يجب عليك أن تستدعي `preventDefault` بشكل صريح، فمثلًا في HTML لمنع السلوك الافتراضي للروابط في فتح صفحة جديدة بإمكانك كتابة ما يلي:
 
 ```html
 <a href="#" onclick="console.log('The link was clicked.'); return false">
   Click me
 </a>
 ```
 
-In React, this could instead be:
+أمّا في React فنكتب بدلًا من ذلك ما يلي:
 
 ```js{2-5,8}
 function ActionLink() {
@@ -54,11 +54,12 @@ function ActionLink() {
 }
 ```
 
-Here, `e` is a synthetic event. React defines these synthetic events according to the [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/), so you don't need to worry about cross-browser compatibility. See the [`SyntheticEvent`](/docs/events.html) reference guide to learn more.
+يُمثِّل المتغيّر `e` هنا حدثًا مُصطنعًا، حيث تُعرِّف React هذه الأحداث المُصطنعة وفق معايير [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/)، بحيث لا نهتم بمشاكل التوافقيّة بين المتصفحات. للمزيد حول [`الأحداث المصطنعة`](/docs/events.html) انتقل إلى مرجع الأحداث في React.
 
-When using React you should generally not need to call `addEventListener` to add listeners to a DOM element after it is created. Instead, just provide a listener when the element is initially rendered.
+عند استخدام React بشكل عام لاينبغي استدعاء `addEventListener` لإضافة مُستمِع للأحداث إلى عنصر DOM بعد إنشائه، وبدلًا من ذلك نُضيف مُستمِعًا للأحداث عند تصيير العنصر (Rendering Element).
+
+عند تعريف المُكوِّنات باستخدام [أصناف ES6](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) هنالك نمط شائع لمعالج الأحداث ليكون تابعًا ضمن الصنف، ففي المثال التالي يعرض المُكوِّن `Toggle` زرًّا يُتيح للمستخدم بأن يقلب بين الحالتين "ON" و "OFF":
 
-When you define a component using an [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes), a common pattern is for an event handler to be a method on the class. For example, this `Toggle` component renders a button that lets the user toggle between "ON" and "OFF" states:
 
 ```js{6,7,10-14,18}
 class Toggle extends React.Component {
@@ -91,13 +92,13 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/xEmzGg?editors=0010)
+[**جرِّب هذا المثال على موقع CodePen**](https://codepen.io/gaearon/pen/xEmzGg?editors=0010)
 
-You have to be careful about the meaning of `this` in JSX callbacks. In JavaScript, class methods are not [bound](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind) by default. If you forget to bind `this.handleClick` and pass it to `onClick`, `this` will be `undefined` when the function is actually called.
+يجب أن تنتبه إلى معنى `this` في ردود نداء JSX، ففي JavaScript لا [تُربَط](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind) توابع الصّنف بشكل افتراضي عن طريق التابع bind()‎، وإن نسيت أن تربط وتُمرِّر `this.handleClick` إلى `onClick`، فستكون قيمة `this` غير مُعرَّفة عند استدعاء الدالة.
 
-This is not React-specific behavior; it is a part of [how functions work in JavaScript](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/). Generally, if you refer to a method without `()` after it, such as `onClick={this.handleClick}`, you should bind that method.
+لا يُعدُّ هذا سلوكًا مرتبطًا بـ React، بل هو جزء من [سياق الدوال في JavaScript](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/). بشكل عام إن أشرت إلى التابع بدون استخدام الأقواس `()` بعده، مثل ‎`onClick={this.handleClick}‎`، فيجب أن تربط ذلك التابع.
 
-If calling `bind` annoys you, there are two ways you can get around this. If you are using the experimental [public class fields syntax](https://babeljs.io/docs/plugins/transform-class-properties/), you can use class fields to correctly bind callbacks:
+إن كان استدعاء التابع `bind()`‎ يزعجك، فهناك طريقتان للالتفاف حول استعماله، إن كنت تستخدم صياغة [حقول الصنف العامة](https://babeljs.io/docs/plugins/transform-class-properties/) التجريبيّة فبإمكانك استخدام حقول الصنف لربط ردود النداء بشكل صحيح:
 
 ```js{2-6}
 class LoggingButton extends React.Component {
@@ -117,9 +118,9 @@ class LoggingButton extends React.Component {
 }
 ```
 
-This syntax is enabled by default in [Create React App](https://github.com/facebookincubator/create-react-app).
+هذه الصياغة مُمكَّنة بشكل افتراضي عند استخدام الأمر [Create React App](https://github.com/facebookincubator/create-react-app).
 
-If you aren't using class fields syntax, you can use an [arrow function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) in the callback:
+إن لم تكن تستخدم صياغة حقول الأصناف، فبإمكانك استخدام [الدوال السّهمية](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) في ردود النداء:
 
 ```js{7-9}
 class LoggingButton extends React.Component {
@@ -137,18 +138,17 @@ class LoggingButton extends React.Component {
   }
 }
 ```
+المشكلة في هذه الصياغة هي إنشاء رد نداء مختلف في كل مرّة يُصيَّر فيها المُكوِّن `LoggingButton`، وفي معظم الحالات يكون هذا مقبولًا، ولكن إن مرَّرنا رد النداء هذا كخاصيّة prop إلى المُكوِّنات الموجودة في المستوى الأدنى، فقد تقوم هذه المُكوِّنات بعمل إعادة تصيير (re-rendering) إضافيّة. نوصي بشكل عام الربط في الدالة البانية (constructor) أو استخدام صياغة حقول الأصناف لتجنّب مثل هذا النوع من مشاكل الأداء.
 
-The problem with this syntax is that a different callback is created each time the `LoggingButton` renders. In most cases, this is fine. However, if this callback is passed as a prop to lower components, those components might do an extra re-rendering. We generally recommend binding in the constructor or using the class fields syntax, to avoid this sort of performance problem.
 
-## Passing Arguments to Event Handlers {#passing-arguments-to-event-handlers}
+## تمرير وسائط إلى معالجات الأحداث {#passing-arguments-to-event-handlers}
 
-Inside a loop it is common to want to pass an extra parameter to an event handler. For example, if `id` is the row ID, either of the following would work:
+من الشائع أن نحتاج بداخل الحلقات (loops) إلى تمرير مُعامِل إضافي إلى مُعالِج الأحداث، فمثلًا إن كان المتغيّر `id` يُمثِّل مُعرِّف الصف (row ID)، فسيعمل كلا السطرين التاليين بنفس الكفاءة:
 
 ```js
 <button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
 <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
 ```
 
-The above two lines are equivalent, and use [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) and [`Function.prototype.bind`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind) respectively.
-
-In both cases, the `e` argument representing the React event will be passed as a second argument after the ID. With an arrow function, we have to pass it explicitly, but with `bind` any further arguments are automatically forwarded.
+إنّ السطرين السابقين متكافئان ويستخدمان [الدوال السهمية](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) و [`Function.prototype.bind`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind) على التوالي وبالترتيب.  
+في كلتا الحالتين سيُمرَّر الوسيط `e` الذي يُمثِّل حدث React كوسيطٍ ثانٍ بعد المُعرِّف ID. في الدوال السهمية يجب أن نُمرِّره بشكلٍ صريح، ولكن في حالة استخدام التابع `bind` فستُمرَّر أي وسائط أخرى تلقائيًّا.