رویدادها در JSX و React – آموزش مدیریت تعامل کاربر با مثال عملی

رویدادها (Events) در React پل ارتباطی بین کاربر و رابط کاربری هستند. هر بار که کاربر روی دکمه‌ای کلیک می‌کند، متنی تایپ می‌کند یا فرمی را ارسال می‌کند، یک رویداد رخ می‌دهد و کامپوننت شما باید به آن واکنش نشان دهد. در JSX، این واکنش‌ها با تابع‌های هندلر و نام‌گذاری CamelCase پیاده‌سازی می‌شوند.

رویداد در React چیست؟

در HTML معمولی از attributeهایی مثل onclick استفاده می‌شود، اما React از Synthetic Event بهره می‌برد؛ سیستمی که رویدادهای مرورگر را یکپارچه و بهینه مدیریت می‌کند. مزیت اصلی این رویکرد، سازگاری بین مرورگرها و عملکرد بهتر در اپلیکیشن‌های بزرگ است.

ساختار کلی:

<button onClick={handleClick}>کلیک کن</button>

• نام رویداد با حرف کوچک on شروع و ادامه آن CamelCase است (onClick، onChange، onSubmit).
• مقدار attribute باید ارجاع به تابع باشد، نه نتیجه اجرای آن.

تعریف تابع هندلر

تابع رویداد می‌تواند خارج از کامپوننت یا داخل بدنه آن تعریف شود:

function handleClick() {
  alert("دکمه کلیک شد");
}

export default function Sample() {
  return <button onClick={handleClick}>کلیک کن</button>;
}

برای دسترسی به اطلاعات رویداد، پارامتر event (یا e) را دریافت کنید:

function handleChange(event) {
  console.log(event.target.value);
}

رویدادهای پرکاربرد در React

اشتباه رایج: اجرای فوری تابع

اگر تابع را با پرانتز بنویسید، بلافاصله اجرا می‌شود:

// ❌ اشتباه — تابع هنگام رندر اجرا می‌شود
<button onClick={handleClick()}>کلیک کن</button>

// ✅ درست — تابع فقط هنگام کلیک اجرا می‌شود
<button onClick={handleClick}>کلیک کن</button>

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

وقتی به تابع نیاز به پارامتر دارید، از Arrow Function استفاده کنید:

<button onClick={() => handleClick("سارا")}>کلیک کن</button>

مدیریت فرم و جلوگیری از رفرش صفحه

به‌صورت پیش‌فرض، ارسال فرم (submit) باعث بارگذاری مجدد صفحه می‌شود. در React با event.preventDefault() این رفتار را متوقف می‌کنیم:

export default function Sample() {
  function handleSubmit(event) {
    event.preventDefault();
    console.log("فرم ارسال شد");
  }

  function changeHandler(event) {
    console.log(event.target.value);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" onChange={changeHandler} />
      <button type="submit">ارسال</button>
    </form>
  );
}

نکته: به‌جای event می‌توانید از نام کوتاه‌تر e استفاده کنید؛ هر دو رایج و قابل قبول هستند.

مثال کامل: فرم با هندلرهای جداگانه

export default function ContactForm() {
  function handleSubmit(event) {
    event.preventDefault();
    alert("پیام شما ثبت شد");
  }

  function handleInputChange(event) {
    console.log("مقدار جدید:", event.target.value);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="نام خود را وارد کنید"
        onChange={handleInputChange}
      />
      <button type="submit">ثبت</button>
    </form>
  );
}

تفاوت رویداد در HTML و JSX

جمع‌بندی

رویدادها در React با نام‌گذاری CamelCase و اتصال تابع به attribute پیاده‌سازی می‌شوند. برای جلوگیری از باگ‌های رایج، تابع را بدون () به رویداد وصل کنید، برای ارسال پارامتر از arrow function استفاده کنید و در فرم‌ها حتماً preventDefault() را فراموش نکنید. با تسلط بر این مفاهیم، هر تعامل کاربری — از کلیک ساده تا فرم‌های پیچیده — را به‌درستی مدیریت خواهید کرد.