ارتباط بین state و رویدادها

مقدمه

تاکنون یاد گرفته‌ایم که چگونه با useState به کامپوننت‌های خود حافظه اضافه کنیم و چگونه چندین متغیر state را مدیریت کنیم. در این درس، ما این دو مفهوم را به یکدیگر متصل کرده و یاد می‌گیریم که چگونه در پاسخ به «رویدادها» (Events) مانند کلیک کردن کاربر، state کامپوننت را به‌روزرسانی کنیم. این ارتباط بین رویدادها و state هسته اصلی ساخت تمام رابط‌های کاربری تعاملی در React است.

تعریف توابع کنترل‌کننده رویداد (Event Handlers)

برای مدیریت رویدادها، ما توابعی را تعریف می‌کنیم که به آنها «کنترل‌کننده رویداد» یا Event Handler گفته می‌شود. این توابع، منطقی را که باید در پاسخ به یک تعامل کاربر (مانند کلیک، تایپ کردن، یا هاور کردن ماوس) اجرا شود، در خود کپسوله می‌کنند. طبق یک قرارداد رایج، نام این توابع معمولاً با کلمه handle و به دنبال آن نام رویداد (مانند handleClick یا handleChange) شروع می‌شود.

ما این توابع را در داخل کامپوننت خود تعریف کرده و سپس آنها را به prop مربوط به رویداد در یک عنصر JSX پاس می‌دهیم.

JAVASCRIPT (React)

import { useState } from 'react';

function Toolbar() {
  const [isDarkMode, setIsDarkMode] = useState(false);

  // Define the event handler function
  function handleThemeClick() {
    setIsDarkMode(!isDarkMode);
  }

  return (
    <div style={{ background: isDarkMode ? 'black' : 'white', color: isDarkMode ? 'white' : 'black' }}>
      <h1>My App</h1>
      <button onClick={handleThemeClick}>
        Change Theme
      </button>
    </div>
  );
}

در این مثال، ما یک کامپوننت Toolbar داریم که یک state به نام isDarkMode برای مدیریت تم تیره/روشن دارد. ما یک تابع event handler به نام handleThemeClick تعریف کرده‌ایم. این تابع مسئولیت تغییر مقدار isDarkMode را بر عهده دارد.

سپس، ما این تابع را به prop مربوط به onClick دکمه پاس داده‌ایم. توجه کنید که ما خود تابع (handleThemeClick) را پاس می‌دهیم، نه نتیجه فراخوانی آن (handleThemeClick()). با این کار، React این تابع را به خاطر سپرده و تنها زمانی که کاربر روی دکمه کلیک می‌کند، آن را اجرا خواهد کرد.

خواندن props در Event Handlerها

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

JAVASCRIPT (React)

function AlertButton({ message, children }) {
  function handleClick() {
    alert(message);
  }

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

function App() {
    return (
        <div>
            <AlertButton message="Playing!">Play Movie</AlertButton>
            <AlertButton message="Uploading!">Upload Image</AlertButton>
        </div>
    )
}

در اینجا، کامپوننت AlertButton یک prop به نام message دریافت می‌کند. تابع handleClick که در داخل آن تعریف شده، به دلیل مکانیزم closure در جاوااسکریپت، به این prop دسترسی دارد و از آن برای نمایش یک پیام هشدار استفاده می‌کند. این الگو به ما اجازه می‌دهد تا یک کامپوننت Button قابل استفاده مجدد بسازیم که با پیام‌های مختلفی کار کند.

در این درس، یاد گرفتیم که چگونه با تعریف توابع event handler و اتصال آنها به عناصر JSX، به تعاملات کاربر واکنش نشان دهیم. دیدیم که این handlerها چگونه می‌توانند با فراخوانی توابع setter، state کامپوننت را به‌روزرسانی کرده و باعث رندر مجدد و تغییر در UI شوند. این ارتباط بین رویداد، handler و state، اساس تمام تعاملات در اپلیکیشن‌های React است.

اکنون که با بلوک‌های سازنده اصلی (کامپوننت، props، state و رویدادها) آشنا شده‌ایم، در درس بعدی به «الگوهای متداول در مدیریت وضعیت ساده» خواهیم پرداخت و چند روش رایج برای ساختاردهی و مدیریت state در کامپوننت‌ها را بررسی خواهیم کرد.