نحوه‌ی مدیریت رویدادها

مقدمه

به فصل هشتم خوش آمدید! بخش بزرگی از ساخت رابط‌های کاربری، واکنش نشان دادن به تعاملات کاربر است: کلیک کردن، تایپ کردن، هاور کردن ماوس و غیره. در React، مدیریت این «رویدادها» (Events) بسیار شبیه به نحوه مدیریت آنها در HTML سنتی است، اما با چند تفاوت سینتکسی کلیدی که آن را با سبک جاوااسکریپت سازگارتر می‌کند.

اتصال Event Handlerها در JSX

برای پاسخ به یک رویداد، ما یک تابع به نام «کنترل‌کننده رویداد» یا Event Handler را به اتریبیوت مربوطه در یک عنصر JSX پاس می‌دهیم.

JAVASCRIPT (React)

function AlertButton() {
  function handleClick() {
    alert('You clicked me!');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

در این مثال، ما یک تابع به نام handleClick تعریف کرده و آن را به prop مربوط به onClick دکمه پاس داده‌ایم. وقتی کاربر روی دکمه کلیک می‌کند، React این تابع را فراخوانی خواهد کرد.

تفاوت‌های کلیدی با HTML

با وجود شباهت‌ها، چند تفاوت مهم بین مدیریت رویدادها در JSX و HTML وجود دارد.

۱. نام‌گذاری camelCase

در HTML، نام رویدادها با حروف کوچک نوشته می‌شود (مانند onclick). اما در JSX، طبق قرارداد از سبک نام‌گذاری camelCase برای نام propهای رویداد استفاده می‌شود.

• onclick در HTML معادل onClick در JSX است.
• onmouseover در HTML معادل onMouseOver در JSX است.

۲. پاس دادن تابع به جای رشته

در HTML، شما معمولاً یک رشته حاوی کد جاوااسکریپت را به عنوان event handler پاس می‌دهید.

HTML

<button onclick="handleClick()">Click me</button>

اما در React، شما خود تابع را (و نه یک رشته) در داخل آکولاد پاس می‌دهید.

JAVASCRIPT (React)

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

توجه کنید که ما خود تابع (handleClick) را پاس می‌دهیم، نه نتیجه فراخوانی آن (handleClick()). اگر پرانتزها را قرار دهید، تابع بلافاصله در حین رندر شدن کامپوننت اجرا خواهد شد، به جای اینکه منتظر کلیک کاربر بماند.

تعریف Event Handlerها به صورت Inline

برای event handlerهای کوتاه، شما می‌توانید تابع را به صورت inline و مستقیماً در JSX تعریف کنید. این کار معمولاً با استفاده از یک تابع لامبدا (arrow function) انجام می‌شود.

JAVASCRIPT (React)

function InlineAlertButton() {
  return (
    <button onClick={() => alert('You clicked me!')}>
      Click me
    </button>
  );
}

این روش برای منطق‌های ساده بسیار خوانا و مختصر است. اما اگر منطق event handler شما پیچیده باشد، بهتر است آن را در یک تابع جداگانه تعریف کنید تا کامپوننت شما تمیزتر باقی بماند.

در این درس با اصول اولیه مدیریت رویدادها در React آشنا شدیم. دیدیم که چگونه می‌توان با استفاده از propهای رویداد با نام‌گذاری camelCase و پاس دادن توابع به عنوان handler به تعاملات کاربر واکنش نشان داد. در درس بعدی، به «رویدادهای کلیک، تغییر، ارسال و ...» خواهیم پرداخت و با انواع رایج رویدادها و نحوه کار با آنها در React بیشتر آشنا خواهیم شد.