React Events رویدادها در ری اکت

رویدادیهای ری اکت یا React Events یا به صورت خلاصه رویدادها، امکان تعامل با کاربر را در برنامه‌های ری اکت فراهم می‌کنند. این رویدادها مانند کلیک دکمه، تغییرات در ورودی‌ها و... هستند.

استفاده از رویدادها در کامپوننت‌های فانکشنی:

کامپوننت‌های تابعی در React نیز می‌توانند از رویدادها استفاده کنند. برای این کار، می‌توانید از `` و سایر پراپرتی‌های رویدادی در JSX استفاده کنید:

import React from 'react';

const FunctionalComponent = () => {
  const handleClick = () => {
    console.log('دکمه کلیک شد!');
  };

  return (
    <button ={handleClick}>
      کلیک کنید
    </button>
  );
};

export default FunctionalComponent;

مدیریت رویدادها در کامپوننت‌های فانکشنی:

در کامپوننت‌های فانکشنی، می‌توانید از `useState` برای مدیریت وضعیت‌ها و ویژگی‌های کامپوننت خود استفاده کنید. برای مثال، اگر بخواهید تعداد کلیک‌ها را نگه دارید:

import React, { useState } from 'react';

const FunctionalComponent = () => {
  const [clickCount, setClickCount] = useState(0);

  const handleClick = () => {
    setClickCount(clickCount + 1);
    console.log(`دکمه ${clickCount + 1} بار کلیک شد!`);
  };

  return (
    <div>
      <p>تعداد کلیک‌ها: {clickCount}</p>      <button ={handleClick}>
        کلیک کنید
      </button>
    </div>
  );
};

export default FunctionalComponent;

مزایای استفاده از رویدادها در ری اکت و توصیه‌ها:

- کامپوننت‌های تابعی به دلیل سادگی و کمتر بودن کد، برای کامپوننت‌های کوچک و مستقل مناسب هستند.
- در استفاده از رویدادها، توجه به تعاملات کاربر و ایجاد تغییرات مدل داده مهم است.

به طور کلی، React Events در کامپوننت‌های تابعی باعث سهولت تعامل با کاربر و توسعه‌پذیری کد می‌شود.
پاس دادن یا ارسال و انتقال آرگومان

برای انتقال یک آرگومان به یک مدیریت کننده یا هندلر رویداد، از یک تابع ارو (arrow function) استفاده کنید.

مثال:
آرگومان "Goal!" را به عنوان پارامتر به تابع shoot منتقل کنید، با استفاده از تابع نمایان:

import React from 'react';
import ReactDOM from 'react-dom';

function Football() {
  const shoot = (a) => {
    alert(a);
  }

  return (
    <button ={() => shoot(&quotGoal!&quot)}>از پنالتی بزن!</button>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Football />);

آموزش و تحلیل کد بالا:

1. استفاده از تابع ارو (اروفانکشن):
- اینجا از تابع ارو برای انتقال پارامتر به `shoot` استفاده شده است.

2. انتقال آرگومان به تابع:
- در تگ `button` رویداد `` از یک تابع ارو استفاده می‌کند که به تابع `shoot` با آرگومان "Goal!" اشاره دارد.

3. نمایش هشدار آلرت:
- وقتی دکمه فشرده می‌شود، یک پنجره هشدار با متن "Goal!" نمایش داده می‌شود.

4. استفاده از React و ReactDOM:
- از React و ReactDOM برای ایجاد و رندر کردن کامپوننت `Football` استفاده شده است. `createRoot` برای ایجاد ریشه اصلی و `render` برای رندر کردن کامپوننت در المان با id 'root'.

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

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

1. : وقتی که المان کلیک می‌شود.
2. : وقتی مقدار یک ورودی تغییر می‌کند.
3. : وقتی یک فرم ارسال می‌شود.
4.و : وقتی ماوس روی المان می‌رود و از آن خارج می‌شود.

مثال:

import React from 'react';

class MyComponent extends React.Component {
  handleClick = () => {
    console.log('دکمه کلیک شد!');
  }

  handleChange = (event) => {
    console.log('مقدار تغییر کرد:', event.target.value);
  }

  handleSubmit = (event) => {
    event.preventDefault();
    console.log('فرم ارسال شد!');
  }

  render() {
    return (
      <div>
        <button ={this.handleClick}>کلیک کنید</button>
        <input type=&quottext&quot ={this.handleChange} />
        <form ={this.handleSubmit}>
          <button type=&quotsubmit&quot>ارسال</button>
        </form>
      </div>
    );
  }
}

export default MyComponent;

در این مثال، "" و "" و "" به ترتیب برای رویدادهای کلیک، تغییر و ارسال فرم استفاده شدند.