رویدادها (Events) در ری‌اکت

در ری‌اکت، رویدادها (Events) مشابه آنچه در جاوااسکریپت وجود دارد، مدیریت می‌شوند، با این تفاوت که ری‌اکت برای سازگاری بهتر و بهبود عملکرد، از روش‌های خاصی برای مدیریت رویدادها استفاده می‌کند. در اینجا نحوه مدیریت رویدادها در ری‌اکت توضیح داده می‌شود:

1. تعریف رویدادها در ری‌اکت

برای اضافه کردن یک رویداد به یک عنصر در ری‌اکت (مثل یک دکمه یا ورودی)، از پراپ‌های رویدادی استفاده می‌کنیم. این پراپ‌ها معمولاً با کامی‌اِل (camelCase) نوشته می‌شوند، به‌جای استفاده از نام‌های سنتی جاوااسکریپت مانند onclick، از onClick استفاده می‌شود.

مثال:

import React from 'react';

function MyComponent() {

  const handleClick = () => {

    alert('Button clicked!');

  };

  return (

    <button onClick={handleClick}>

      Click Me

    </button>

  );

}

export default MyComponent;

در این مثال:

onClick یک پراپ رویدادی است که به دکمه اضافه می‌شود.

handleClick تابعی است که هنگام وقوع رویداد Click فراخوانی می‌شود.

2. رویدادهای معمول در ری‌اکت

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

onClick - برای مدیریت کلیک‌ها

onChange - برای مدیریت تغییرات در فرم‌ها یا ورودی‌ها

onSubmit - برای مدیریت ارسال فرم‌ها

onMouseEnter و onMouseLeave - برای تعاملات ماوس

onKeyDown, onKeyPress, onKeyUp - برای مدیریت کلیدهای صفحه‌کلید

3. استفاده از پارامترها در رویدادها

اگر نیاز دارید که اطلاعات اضافی به رویداد ارسال کنید (مثل آرگومان‌هایی برای رویداد)، می‌توانید از توابع فشرده (arrow functions) استفاده کنید.

مثال:

import React from 'react';

function MyComponent() {

  const handleClick = (id, event) => {

    alert(`Button clicked with ID: ${id}`);

  };

  return (

    <button onClick={(event) => handleClick(1, event)}>

      Click Me

    </button>

  );

}

export default MyComponent;

در این مثال:

با استفاده از arrow function، می‌توانیم پارامترهایی مانند id را به تابع handleClick ارسال کنیم.

event نیز به‌طور خودکار به تابع handleClick ارسال می‌شود.

4. پیشگیری از رفتار پیش‌فرض (preventDefault) و متوقف کردن رویداد (stopPropagation)

گاهی اوقات ممکن است بخواهید از رفتار پیش‌فرض رویداد جلوگیری کنید یا از انتشار آن به سایر عناصر جلوگیری کنید. برای این کار از متدهای preventDefault() و stopPropagation() استفاده می‌کنیم.

مثال:

import React from 'react';

function MyComponent() {

  const handleSubmit = (event) => {

    event.preventDefault();  // جلوگیری از ارسال فرم

    alert('Form submission prevented!');

  };

  return (

    <form onSubmit={handleSubmit}>

      <button type="submit">Submit</button>

    </form>

  );

}

export default MyComponent;

در این مثال:

از event.preventDefault() برای جلوگیری از ارسال فرم استفاده می‌کنیم.

مثال دیگر با stopPropagation:

import React from 'react';

function ParentComponent() {

  const handleClick = () => {

    alert('Parent button clicked!');

  };

  return (

    <div onClick={handleClick}>

      <ChildComponent />

    </div>

  );

}

function ChildComponent() {

  const handleClick = (event) => {

    event.stopPropagation(); // جلوگیری از پراکسی شدن رویداد به والد

    alert('Child button clicked!');

  };

  return (

    <button onClick={handleClick}>Click Me</button>

  );

}

export default ParentComponent;

در این مثال:

از event.stopPropagation() برای جلوگیری از ارسال رویداد به والدین استفاده می‌شود.

5. استفاده از Synthetic Events در ری‌اکت

ری‌اکت از سیستم Synthetic Events استفاده می‌کند که یک لایه انتزاعی روی رویدادهای استاندارد مرورگر است. این سیستم باعث می‌شود که رویدادها در ری‌اکت به‌طور یکسان در همه مرورگرها کار کنند. Synthetic Events مشابه با رویدادهای معمول در جاوااسکریپت هستند، اما به‌طور خاص در ری‌اکت مدیریت می‌شوند تا بتوانند با عملکرد بهینه‌تری کار کنند.

تفاوت‌ها:

رویدادها در ری‌اکت به صورت پراپ‌ها تعریف می‌شوند و نسبت به رویدادهای جاوااسکریپت سبک‌تر و سریع‌تر هستند.

React خودش به‌طور خودکار این رویدادها را به سیستم Synthetic Events تبدیل می‌کند.

6. استفاده از رویدادهای اختصاصی

ری‌اکت به شما این امکان را می‌دهد که رویدادهای اختصاصی خودتان را نیز مدیریت کنید. مثلاً می‌توانید رویدادهایی مانند onCustomEvent را به‌راحتی برای وضعیت‌های خاص خود ایجاد کنید.

مثال:

import React, { useState } from 'react';

function CustomEventComponent() {

  const [message, setMessage] = useState('');

  const handleCustomEvent = (event) => {

    setMessage(event.detail);

  };

  React.useEffect(() => {

    window.addEventListener('customEvent', handleCustomEvent);

    return () => {

      window.removeEventListener('customEvent', handleCustomEvent);

    };

  }, []);

  const triggerEvent = () => {

    const event = new CustomEvent('customEvent', {

      detail: 'Custom event triggered!',

    });

    window.dispatchEvent(event);

  };

  return (

    <div>

      <button onClick={triggerEvent}>Trigger Custom Event</button>

      <p>{message}</p>

    </div>

  );

}

export default CustomEventComponent;

7. جمع‌بندی

رویدادها در ری‌اکت به‌طور مشابه با جاوااسکریپت مدیریت می‌شوند، با این تفاوت که از camelCase برای نام‌گذاری استفاده می‌شود.

برای مدیریت رویدادها می‌توان از توابع (مثل handleClick) برای اجرای عملیات مختلف استفاده کرد.

در صورت نیاز به جلوگیری از رفتار پیش‌فرض یا جلوگیری از انتشار رویداد، از preventDefault و stopPropagation استفاده می‌کنیم.

ری‌اکت از Synthetic Events استفاده می‌کند که کار با رویدادها را سریع‌تر و سازگارتر با مرورگرها می‌کند.

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