Event handling doc translated

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 syntax differences:
+مدیریت رویدادها (Handling Events) در المنت‌های ری‌اکت بسیار شبیه به مدیریت رویدادها در المنت‌های DOM است. بعضی تفاوت‌های نحوی وجود دارد:
 
-* React events are named using camelCase, rather than lowercase.
-* With JSX you pass a function as the event handler, rather than a string.
+* رویدادهای ری‌اکت به جای حروف کوچک از نامگذاری camelCase استفاده می‌کنند.
+* با JSX، به جای یک رشته متنی یک تابع به عنوان event handler پاس می‌دهید.
 
-For example, the HTML:
+برای مثال، کد HTML:
 
 ```html
 <button onclick="activateLasers()">
   Activate Lasers
 </button>
 ```
 
-is slightly different in 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` را بازگردانید. شما باید `preventDefault` را صریحا فراخانی کنید. برای مثال، در HTML ساده، برای جلوگیری از بازکردن یک صفحه جدید به عنوان رفتار پیش‌فرض لینک می‌توانید بنویسید:
 
 ```html
 <a href="#" onclick="console.log('The link was clicked.'); return false">
   Click me
 </a>
 ```
 
-In React, this could instead be:
+در ری‌اکت می‌توانید این کد را جایگزین کنید:
 
 ```js{2-5,8}
 function ActionLink() {
@@ -54,11 +54,11 @@ 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. React events do not work exactly the same as native events. See the [`SyntheticEvent`](/docs/events.html) reference guide to learn more.
+اینجا، `e` یک رویداد مصنوعی (synthetic) است. ری‌اکت این رویدادهای مصنوعی را بر اساس [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/) تعریف می‌کند، بنابراین نیازی نیست نگران سازگاری مرورگرهای مختلف باشید. رویدادهای ری‌اکت دقیقا شبیه به رویدادهای محلی کار نمی‌کنند. مرجع راهنمای [`SyntheticEvent`](/docs/events.html) را برای یادگیری بیشتر ببینید.
 
-When using React, you generally don't 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.
+هنگام استفاده از ری‌اکت، عموما شما نیازی به فراخوانی `addEventListener` برای اضافه کردن listener ها به یک المنت DOM پس از ایجاد آن ندارید. به جای آن، فقط یک listener زمان رندر اولیه المنت فراهم کنید.
 
-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:
+زمانی که شما با استفاده از [کلاس‌های ES6](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) یک کامپوننت تعریف می‌کنید، یک متد روی کلاس بودن یک الگوی رایج برای یک event handler است. برای مثال، این کامپوننت `Toggle` یک کلید که به کاربر اجازه تغییر state به  "ON" و "OFF" می‌دهد را رندر می‌کند.
 
 ```js{6,7,10-14,18}
 class Toggle extends React.Component {
@@ -91,13 +91,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 callbacks دقت کنید. در جاوااسکریپت، متدهای کلاس به صورت پیش‌فرض [bind](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind) نیستند. اگر شما bind کردن `this.handleClick` را فراموش کنید و آن را به `onClick` پاس دهید، `this` زمانی که تابع واقعا فراخوانی می‌شود `undefined` خواهد بود.
 
-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.
+این رفتار مختص به ری‌اکت نیست. این جزئی از [چگونگی کارکرد توابع در جاوااسکریپت](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/) است. عموما، اگر شما بدون `()` بعد از آن به یک تابع اشاره کنید، مانند `onClick={this.handleClick}`، شما باید آن متد را bind کنید.
 
-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/) استفاده می‌کنید، می‌توانید از فیلدهای کلاس برای bind کردن صحیح callback ها استفاده کنید.
 
 ```js{2-6}
 class LoggingButton extends React.Component {
@@ -117,9 +117,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:
+اگر شما از قاعده فیلدهای کلاس استفاده نمی‌کنید، می‌توانید از یک [arrow function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) در callback استفاده کنید.
 
 ```js{7-9}
 class LoggingButton extends React.Component {
@@ -138,17 +138,17 @@ class LoggingButton extends React.Component {
 }
 ```
 
-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.
+مشکل این قاعده این است که با هر بار رندر شدن `LoggingButton` یک callback متفاوت ایجاد می‌شود. در بیشتر موارد، این مشکلی ندارد. به هر حال، اگر این callback به عنوان یک prop به کامپوننت‌های پایین‌تر ارسال شود، آن کامپوننت‌ها ممکن است رندرهای اضافه را تجربه کنند. ما عموما bind کردن در سازنده (constructor) یا استفاده از قاعده فیلدهای کلاس را برای جلوگیری از بروز مشکلات عملکرد پیشنهاد می‌کنیم.
 
-## Passing Arguments to Event Handlers {#passing-arguments-to-event-handlers}
+## پاس دادن آرگومان‌ها به 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:
+در یک حلقه، این که بخواهیم یک پارامتر اضافه به یک event handler پاس بدهیم رایج است. برای مثال، اگر `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.
+دو خط بالا با هم یکسان هستند و از [arrow functions](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) استفاده می‌کنند.
 
-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.
+در هر دو حالت، `e` که نمایانگر رویداد ری‌اکت است به عنوان آرگومان دوم پس از ID پاس داده می‌شود. با یک arrow function، ما باید آن را صریحا ارسال کنیم، اما با `bind` کردن، هرگونه آگومان مورد نیازی به صورت خودکار ارسال می‌شود.