هندلرهای درون‌خطی در JSX – حذف آیتم‌ها با رویکردی ساده و قابل خواندن

مقدمه

در React، هندلرهای درون‌خطی (inline handlers) به ما اجازه می‌دهند توابع را مستقیماً در JSX اجرا کنیم. این روش به‌ویژه زمانی مفید است که بخواهیم پارامترهایی را به تابع ارسال کنیم، مانند حذف یک آیتم خاص از لیست.

ایجاد لیست قابل حذف

ابتدا لیست را به‌صورت state تعریف می‌کنیم تا بتوانیم آن را تغییر دهیم:

const [stories, setStories] = React.useState(initialStories);

سپس تابعی برای حذف آیتم‌ها تعریف می‌کنیم:

const handleRemoveStory = (item) => {
  const newStories = stories.filter(
    (story) => item.objectID !== story.objectID
  );
  setStories(newStories);
};

ارسال هندلر به کامپوننت‌های فرزند

تابع handleRemoveStory را به کامپوننت List ارسال می‌کنیم:

<List list={searchedStories} onRemoveItem={handleRemoveStory} />

و از آن در کامپوننت Item استفاده می‌کنیم.

استفاده از هندلر معمولی

در حالت معمول، ابتدا یک تابع داخلی تعریف می‌کنیم:

const handleRemoveItem = () => {
  onRemoveItem(item);
};

و سپس آن را به دکمه متصل می‌کنیم:

<button onClick={handleRemoveItem}>Dismiss</button>

استفاده از هندلر درون‌خطی

برای ساده‌تر کردن کد، می‌توانیم از هندلر درون‌خطی استفاده کنیم:

<button onClick={() => onRemoveItem(item)}>Dismiss</button>

یا با استفاده از bind:

<button onClick={onRemoveItem.bind(null, item)}>Dismiss</button>

نکات مهم

• هندلرهای درون‌خطی برای منطق ساده مناسب هستند.
• اگر منطق پیچیده‌ای دارید، بهتر است تابع را جداگانه تعریف کنید.
• استفاده از arrow function رایج‌تر و خواناتر از bind است.

جمع‌بندی

هندلرهای درون‌خطی در JSX راهی مؤثر برای اجرای توابع با پارامتر هستند. با استفاده از آن‌ها می‌توان کد را ساده‌تر و خواناتر کرد، به‌ویژه در مواردی مانند حذف آیتم‌ها از لیست. با این حال، در صورت پیچیدگی منطق، بهتر است از هندلرهای جداگانه استفاده شود.