ارسال پارامتر و مدیریت رفتار پیش‌فرض

مقدمه

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

ارسال پارامتر به Event Handlerها

همانطور که قبلاً اشاره شد، ما نمی‌توانیم یک event handler را با پرانتز فراخوانی کنیم (handleClick(id))، زیرا این کار باعث اجرای فوری تابع در زمان رندر می‌شود. راه‌حل صحیح، استفاده از یک تابع لامبدا (arrow function) به صورت inline است.

الگوی تابع لامبدا

شما می‌توانید یک تابع لامبدا تعریف کنید که هیچ آرگومانی نمی‌گیرد و در داخل بدنه خود، event handler اصلی شما را با پارامترهای مورد نظر فراخوانی می‌کند.

JAVASCRIPT (React)

function ProductList() {
  const products = [
    { id: 1, name: 'Laptop' },
    { id: 2, name: 'Mouse' },
  ];

  function handleAddToCart(productId, productName) {
    alert(`Added ${productName} (ID: ${productId}) to cart!`);
  }

  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>
          {product.name}{' '}
          <button onClick={() => handleAddToCart(product.id, product.name)}>
            Add to Cart
          </button>
        </li>
      ))}
    </ul>
  );
}

در این مثال، برای هر محصول یک دکمه "Add to Cart" رندر می‌شود. در رویداد onClick ما یک تابع لامبدا (() => ...) تعریف کرده‌ایم. این تابع تنها زمانی اجرا می‌شود که روی دکمه کلیک شود.

در داخل این تابع لامبدا، ما event handler اصلی خود، یعنی handleAddToCart را با ID و نام محصول مربوطه فراخوانی می‌کنیم. این الگو به ما اجازه می‌دهد تا به صورت پویا و بر اساس داده‌های هر آیتم، پارامترهای متفاوتی را به handler خود ارسال کنیم.

مدیریت رفتار پیش‌فرض

بسیاری از رویدادها در مرورگر دارای یک «رفتار پیش‌فرض» (default behavior) هستند. برای مثال، کلیک روی یک لینک (<a>) باعث ناوبری به یک صفحه جدید می‌شود، و ارسال یک فرم (<form>) باعث رفرش شدن کامل صفحه می‌شود. در اپلیکیشن‌های تک-صفحه‌ای React، ما معمولاً می‌خواهیم از این رفتارهای پیش‌فرض جلوگیری کرده و منطق را خودمان با جاوااسکریپت مدیریت کنیم.

استفاده از event.preventDefault()

تمام توابع event handler در React، یک شیء رویداد (event object) را به عنوان اولین آرگومان دریافت می‌کنند. این شیء حاوی متدی به نام preventDefault() است. فراخوانی این متد به مرورگر می‌گوید که رفتار پیش‌فرض مربوط به آن رویداد را اجرا نکند.

JAVASCRIPT (React)

function SignupForm() {
  function handleSubmit(event) {
    // Prevent the browser from reloading the page
    event.preventDefault();
    
    alert('Submitting the form...');
    // Here you would typically send the data to a server
  }

  return (
    <form onSubmit={handleSubmit}>
      <input placeholder="Enter your email" />
      <button type="submit">Subscribe</button>
    </form>
  );
}

در این کامپوننت فرم، ما handler خود را به رویداد onSubmit متصل کرده‌ایم. اولین خط در تابع handleSubmit فراخوانی event.preventDefault() است. این کار از رفرش شدن صفحه جلوگیری کرده و به ما اجازه می‌دهد تا منطق ارسال داده را به صورت کامل با جاوااسکریپت (مثلاً با استفاده از fetch) کنترل کنیم.

در این درس، با دو الگوی پیشرفته اما ضروری در مدیریت رویدادها آشنا شدیم: ارسال پارامتر به handlerها با استفاده از توابع لامبدا، و جلوگیری از رفتارهای پیش‌فرض مرورگر با event.preventDefault(). با این درس، فصل «مدیریت رویدادها» به پایان می‌رسد. شما اکنون می‌توانید رابط‌های کاربری کاملاً تعاملی بسازید. در فصل بعدی، به «کار با فرم‌ها در ری‌اکت» خواهیم پرداخت و با جزئیات بیشتری به ساخت فرم‌های پیچیده و مدیریت داده‌های ورودی آنها خواهیم پرداخت.