{"componentChunkName":"component---src-templates-docs-js","path":"/docs/handling-events.html","result":{"data":{"markdownRemark":{"html":"

مدیریت رویدادها (Handling Events) در المنت‌های ری‌اکت بسیار شبیه به مدیریت رویدادها در المنت‌های DOM است. بعضی تفاوت‌های نحوی وجود دارد:

\n\n

برای مثال، کد HTML:

\n
<button onclick=\"activateLasers()\">\n  Activate Lasers\n</button>
\n

کمی در ری‌اکت متفاوت است:

\n
<button onClick={activateLasers}>  Activate Lasers\n</button>
\n

تفاوت دیگر این است که شما نمی‌توانید برای جلوگیری از رفتار پیش‌فرض در ری‌اکت، مقدار false را بازگردانید. شما باید preventDefault را صریحا فراخانی کنید. برای مثال، در HTML ساده، برای جلوگیری از بازکردن یک صفحه جدید به عنوان رفتار پیش‌فرض لینک می‌توانید بنویسید:

\n
<a href=\"#\" onclick=\"console.log('The link was clicked.'); return false\">\n  Click me\n</a>
\n

در ری‌اکت می‌توانید این کد را جایگزین کنید:

\n
function ActionLink() {\n  function handleClick(e) {    e.preventDefault();    console.log('The link was clicked.');  }\n  return (\n    <a href=\"#\" onClick={handleClick}>      Click me\n    </a>\n  );\n}
\n

اینجا، e یک رویداد مصنوعی (synthetic) است. ری‌اکت این رویدادهای مصنوعی را بر اساس W3C spec تعریف می‌کند، بنابراین نیازی نیست نگران سازگاری مرورگرهای مختلف باشید. رویدادهای ری‌اکت دقیقا شبیه به رویدادهای محلی کار نمی‌کنند. مرجع راهنمای SyntheticEvent را برای یادگیری بیشتر ببینید.

\n

هنگام استفاده از ری‌اکت، عموما شما نیازی به فراخوانی addEventListener برای اضافه کردن listener ها به یک المنت DOM پس از ایجاد آن ندارید. به جای آن، فقط یک listener زمان رندر اولیه المنت فراهم کنید.

\n

زمانی که شما با استفاده از کلاس‌های ES6 یک کامپوننت تعریف می‌کنید، یک متد روی کلاس بودن یک الگوی رایج برای یک event handler است. برای مثال، این کامپوننت Toggle یک کلید که به کاربر اجازه تغییر state به “ON” و “OFF” می‌دهد را رندر می‌کند.

\n
class Toggle extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {isToggleOn: true};\n\n    // This binding is necessary to make `this` work in the callback    this.handleClick = this.handleClick.bind(this);  }\n\n  handleClick() {    this.setState(state => ({      isToggleOn: !state.isToggleOn    }));  }\n  render() {\n    return (\n      <button onClick={this.handleClick}>        {this.state.isToggleOn ? 'ON' : 'OFF'}\n      </button>\n    );\n  }\n}\n\nReactDOM.render(\n  <Toggle />,\n  document.getElementById('root')\n);
\n

این را روی CodePen امتحان کنید

\n

شما باید در مورد معنی this در JSX callbacks دقت کنید. در جاوااسکریپت، متدهای کلاس به صورت پیش‌فرض bind نیستند. اگر شما bind کردن this.handleClick را فراموش کنید و آن را به onClick پاس دهید، this زمانی که تابع واقعا فراخوانی می‌شود undefined خواهد بود.

\n

این رفتار مختص به ری‌اکت نیست. این جزئی از چگونگی کارکرد توابع در جاوااسکریپت است. عموما، اگر شما بدون () بعد از آن به یک تابع اشاره کنید، مانند onClick={this.handleClick}، شما باید آن متد را bind کنید.

\n

اگر فراخوانی bind شما را آزار می‌دهد، دو راه برای دور زدن ان وجود دارد. اگر شما از قاعده فیلدهای عمومی کلاس استفاده می‌کنید، می‌توانید از فیلدهای کلاس برای bind کردن صحیح callback ها استفاده کنید.

\n
class LoggingButton extends React.Component {\n  // This syntax ensures `this` is bound within handleClick.  // Warning: this is *experimental* syntax.  handleClick = () => {    console.log('this is:', this);  }\n  render() {\n    return (\n      <button onClick={this.handleClick}>\n        Click me\n      </button>\n    );\n  }\n}
\n

این قاعده به صورت پیش‌فرض در Create React App فعال شده‌است.

\n

اگر شما از قاعده فیلدهای کلاس استفاده نمی‌کنید، می‌توانید از یک arrow function در callback استفاده کنید.

\n
class LoggingButton extends React.Component {\n  handleClick() {\n    console.log('this is:', this);\n  }\n\n  render() {\n    // This syntax ensures `this` is bound within handleClick    return (      <button onClick={() => this.handleClick()}>        Click me\n      </button>\n    );\n  }\n}
\n

مشکل این قاعده این است که با هر بار رندر شدن LoggingButton یک callback متفاوت ایجاد می‌شود. در بیشتر موارد، این مشکلی ندارد. به هر حال، اگر این callback به عنوان یک prop به کامپوننت‌های پایین‌تر ارسال شود، آن کامپوننت‌ها ممکن است رندرهای اضافه را تجربه کنند. ما عموما bind کردن در سازنده (constructor) یا استفاده از قاعده فیلدهای کلاس را برای جلوگیری از بروز مشکلات عملکرد پیشنهاد می‌کنیم.

\n

پاس دادن آرگومان‌ها به Event Handlers ها

\n

در یک حلقه، این که بخواهیم یک پارامتر اضافه به یک event handler پاس بدهیم رایج است. برای مثال، اگر id، شناسه سطر باشد، هر دو کد زیر کار خواهند کرد:

\n
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>\n<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
\n

دو خط بالا با هم یکسان هستند و از arrow functions و Function.prototype.bind استفاده می‌کنند.

\n

در هر دو حالت، e که نمایانگر رویداد ری‌اکت است به عنوان آرگومان دوم پس از ID پاس داده می‌شود. با یک arrow function، ما باید آن را صریحا ارسال کنیم، اما با bind کردن، هرگونه آگومان مورد نیازی به صورت خودکار ارسال می‌شود.

","frontmatter":{"title":"مدیریت رویدادها","next":"conditional-rendering.html","prev":"state-and-lifecycle.html"},"fields":{"path":"content/docs/handling-events.md","slug":"docs/handling-events.html"}}},"pageContext":{"slug":"docs/handling-events.html"}},"staticQueryHashes":[]}