رویدادها (Events)

در React، رویدادها (Events) یعنی واکنش به کارهای کاربر. مثلاً کلیک، تغییر متن، یا حرکت ماوس. مثل وقتی در بازی دکمه می زنی و شخصیت می پرد.

نوشتن رویدادها در React

در HTML معمولی، رویدادها را با حروف کوچک می نویسی؛ مثل onclick. اما در رویدادهای React باید از camelCase استفاده کنی؛ یعنی حروف ترکیبی مثل onClick.

همچنین، در HTML تابع را داخل رشته (String) می نویسی. اما در React، هندلر رویداد (Event Handler) را داخل آکولاد {} قرار می دهی؛ چون یک مقدار جاوااسکریپتی است.

<button onClick={shoot}>Take the Shot!</button>

مشاهده در ادیتور

<button onclick="shoot()">Take the Shot!</button>

مشاهده در ادیتور

نکته: در رویدادهای React همیشه از onClick، onChange، onMouseOver و شبیه این ها استفاده کن؛ نه نسخه حروف کوچک.

قرار دادن تابع رویداد داخل کامپوننت

به تابعی که هنگام رویداد اجرا می شود، هندلر رویداد (Event Handler) می گویند. بهتر است این تابع را داخل خود کامپوننت تعریف کنی؛ مثل نمونه فوتبال.

function Football() {
  const shoot = () => {
    alert("Great Shot!");
  };

  return (
    <button onClick={shoot}>Take the shot!</button>
  );
}

createRoot(document.getElementById("root")).render(
  <Football />
);

مشاهده در ادیتور

اینجا وقتی کاربر روی دکمه کلیک کند، تابع shoot اجرا می شود. در نتیجه یک alert با متن «Great Shot!» نمایش داده می شود.

گام به گام ساخت یک رویداد ساده

1. یک کامپوننت مثل Football بساز.
2. داخل آن، یک تابع هندلر مثل shoot تعریف کن.
3. یک دکمه در return بگذار و onClick={shoot} بنویس.
4. کامپوننت را با createRoot(...).render() در صفحه رندر کن.

ارسال آرگومان به هندلر رویداد

گاهی می خواهی هنگام رویداد، یک متن یا عدد خاص هم بفرستی. برای این کار، در رویدادهای React از تابع پیکانی (Arrow Function) استفاده می کنی تا آرگومان را خودت بدهی.

function Football() {
  const shoot = (message) => {
    alert(message);
  };

  return (
    <button onClick={() => shoot("Goal!")} >
      Take the shot!
    </button>
  );
}

createRoot(document.getElementById("root")).render(
  <Football />
);

مشاهده در ادیتور

اینجا کلیک روی دکمه، تابع پیکانی را اجرا می کند. آن تابع، رشته "Goal!" را به shoot می فرستد و پیام نشان داده می شود.

تمرین ارسال آرگومان در رویدادهای React

1. تابع هندلر را با یک ورودی مثل name تعریف کن.
2. داخل تابع، نام را در یک alert نمایش بده.
3. در رویداد onClick از تابع پیکانی استفاده کن.
4. هنگام کلیک، نام دلخواه را به تابع بفرست.

شیء رویداد در React

هر رویداد در React یک شیء رویداد (Event Object) می سازد. این شیء اطلاعاتی مثل نوع رویداد، هدف کلیک شده و خیلی چیزهای دیگر را نگه می دارد.

می توانی این شیء را خودت به هندلر بفرستی. کافی است در تابع پیکانی، پارامتر event را بگیری و آن را به تابع اصلی بدهی.

function Football() {
  const shoot = (message, event) => {
    alert(event.type);
    /*
    event نماینده رویدادی است که تابع را اجرا کرده است.
    در این مثال، نوع رویداد 'click' خواهد بود.
    */
  };

  return (
    <button onClick={(event) => shoot("Goal!", event)}>
      Take the shot!
    </button>
  );
}

createRoot(document.getElementById("root")).render(
  <Football />
);

مشاهده در ادیتور

در این مثال، event.type برابر "click" است. این کار در فرم ها و ورودی ها خیلی کاربردی می شود.

در فصل فرم ها می توانی ببینی چطور از شیء رویداد برای خواندن مقدار فیلدها استفاده می شود. آنجا رویدادهایی مثل onChange و onSubmit مهم هستند.

جمع بندی سریع رویدادها (Events)

• رویدادهای React شبیه رویدادهای HTML هستند، اما با camelCase.
• هندلر رویداد را داخل آکولاد مثل onClick={shoot} می نویسی.
• برای ارسال آرگومان در رویدادهای React از تابع پیکانی استفاده کن.
• شیء رویداد اطلاعاتی مثل نوع رویداد را در خود دارد.
• برای مرور دوباره رویدادهای React همیشه می توانی به همین صفحه برگردی.