سطح کارآموز: مدیریت رویدادها در React

Summarize this content to 400 words in Persian Lang
مدیریت رویدادها در React یک جنبه حیاتی در ایجاد برنامه های کاربردی وب تعاملی است. این راهنما شما را با اصول مدیریت رویداد در React آشنا می‌کند، از جمله اضافه کردن کنترل‌کننده‌های رویداد، درک رویدادهای مصنوعی، انتقال آرگومان‌ها به کنترل‌کننده‌های رویداد، ایجاد رویدادهای سفارشی و تفویض رویداد.

مدیریت رویداد

اضافه کردن رویداد Handler در JSX

در React، می‌توانید کنترل‌کننده‌های رویداد را مستقیماً در JSX خود اضافه کنید. کنترل‌کننده‌های رویداد، توابعی هستند که هنگام وقوع یک رویداد خاص، مانند کلیک روی دکمه یا ارسال فرم، فراخوانی می‌شوند. مدیریت رویداد React شبیه به مدیریت رویدادها در HTML معمولی است، اما با چند تفاوت.

مثالی از افزودن یک کنترل کننده رویداد:

import React from ‘react’;

const handleClick = () => {
alert(‘Button clicked!’);
};

const App = () => {
return (
div>
button onClick={handleClick}>Click Mebutton>
div>
);
};

export default App;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این مثال، handleClick هر زمان که دکمه کلیک شود، تابع فراخوانی می شود. این onClick ویژگی در JSX برای تعیین کنترل کننده رویداد استفاده می شود.

رویدادهای مصنوعی

React از سیستمی به نام رویدادهای مصنوعی برای مدیریت رویدادها استفاده می کند. رویدادهای مصنوعی یک بسته بندی متقابل مرورگر در اطراف سیستم رویداد بومی مرورگر است. این تضمین می کند که رویدادها به طور مداوم در مرورگرهای مختلف رفتار می کنند.

مثالی از یک رویداد مصنوعی:

import React from ‘react’;

const handleInputChange = (event) => {
console.log(‘Input value:’, event.target.value);
};

const App = () => {
return (
div>
input type=”text” onChange={handleInputChange} />
div>
);
};

export default App;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این مثال، handleInputChange تابع مقدار فیلد ورودی را هر زمان که تغییر کند ثبت می کند. این event پارامتر یک رویداد مصنوعی است که ویژگی های رویداد ثابت را در همه مرورگرها ارائه می دهد.

انتقال آرگومان ها به گردانندگان رویداد

گاهی اوقات، شما نیاز دارید که آرگومان های اضافی را به کنترل کننده رویداد ارسال کنید. این را می توان با استفاده از یک تابع فلش یا تابع انجام داد bind روش.

مثال با استفاده از تابع پیکان:

import React from ‘react’;

const handleClick = (message) => {
alert(message);
};

const App = () => {
return (
div>
button onClick={() => handleClick(‘Button clicked!’)}>Click Mebutton>
div>
);
};

export default App;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مثال با استفاده از bind روش:

import React from ‘react’;

const handleClick = (message) => {
alert(message);
};

const App = () => {
return (
div>
button onClick={handleClick.bind(null, ‘Button clicked!’)}>Click Mebutton>
div>
);
};

export default App;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

هر دو روش به شما اجازه می دهند که آرگومان های اضافی را به آن ارسال کنید handleClick تابع.

مدیریت رویداد سفارشی

ایجاد رویدادهای سفارشی

در حالی که رویدادهای مصنوعی React بیشتر موارد استفاده معمولی را پوشش می‌دهند، ممکن است نیاز به ایجاد رویدادهای سفارشی برای تعاملات پیچیده‌تر داشته باشید. رویدادهای سفارشی را می توان با استفاده از ایجاد و ارسال کرد CustomEvent سازنده و dispatchEvent روش.

نمونه ای از ایجاد و ارسال یک رویداد سفارشی:

import React, { useEffect, useRef } from ‘react’;

const CustomEventComponent = () => {
const buttonRef = useRef(null);

useEffect(() => {
const handleCustomEvent = (event) => {
alert(event.detail.message);
};

const button = buttonRef.current;
button.addEventListener(‘customEvent’, handleCustomEvent);

return () => {
button.removeEventListener(‘customEvent’, handleCustomEvent);
};
}, []);

const handleClick = () => {
const customEvent = new CustomEvent(‘customEvent’, {
detail: { message: ‘Custom event triggered!’ },
});
buttonRef.current.dispatchEvent(customEvent);
};

return (
button ref={buttonRef} onClick={handleClick}>
Trigger Custom Event
button>
);
};

export default CustomEventComponent;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این مثال، یک رویداد سفارشی به نام customEvent با کلیک روی دکمه ایجاد و ارسال می شود. کنترل کننده رویداد به رویداد سفارشی گوش می دهد و هشداری را با پیام جزئیات رویداد نمایش می دهد.

Delegation رویداد در React

انتقال رویداد تکنیکی است که در آن یک شنونده رویداد برای مدیریت رویدادها برای چندین عنصر استفاده می شود. این برای مدیریت موثر رویدادها، به ویژه در لیست ها یا جداول مفید است.

نمونه ای از نمایندگی رویداد:

import React from ‘react’;

const handleClick = (event) => {
if (event.target.tagName === ‘BUTTON’) {
alert(`Button ${event.target.textContent} clicked!`);
}
};

const App = () => {
return (
div onClick={handleClick}>
button>1button>
button>2button>
button>3button>
div>
);
};

export default App;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این مثال، یک کنترل کننده رویداد واحد بر روی div عنصر رویدادهای کلیک را برای همه دکمه ها مدیریت می کند. کنترل کننده رویداد را بررسی می کند event.target برای تعیین اینکه روی کدام دکمه کلیک شده است و بر این اساس یک هشدار نمایش داده می شود.

نتیجه

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

import React from 'react';

const handleClick = () => {
  alert('Button clicked!');
};

const App = () => {
  return (
    div>
      button onClick={handleClick}>Click Mebutton>
    div>
  );
};

export default App;

import React from 'react';

const handleInputChange = (event) => {
  console.log('Input value:', event.target.value);
};

const App = () => {
  return (
    div>
      input type="text" onChange={handleInputChange} />
    div>
  );
};

export default App;

import React from 'react';

const handleClick = (message) => {
  alert(message);
};

const App = () => {
  return (
    div>
      button onClick={() => handleClick('Button clicked!')}>Click Mebutton>
    div>
  );
};

export default App;

import React from 'react';

const handleClick = (message) => {
  alert(message);
};

const App = () => {
  return (
    div>
      button onClick={handleClick.bind(null, 'Button clicked!')}>Click Mebutton>
    div>
  );
};

export default App;

import React, { useEffect, useRef } from 'react';

const CustomEventComponent = () => {
  const buttonRef = useRef(null);

  useEffect(() => {
    const handleCustomEvent = (event) => {
      alert(event.detail.message);
    };

    const button = buttonRef.current;
    button.addEventListener('customEvent', handleCustomEvent);

    return () => {
      button.removeEventListener('customEvent', handleCustomEvent);
    };
  }, []);

  const handleClick = () => {
    const customEvent = new CustomEvent('customEvent', {
      detail: { message: 'Custom event triggered!' },
    });
    buttonRef.current.dispatchEvent(customEvent);
  };

  return (
    button ref={buttonRef} onClick={handleClick}>
      Trigger Custom Event
    button>
  );
};

export default CustomEventComponent;

import React from 'react';

const handleClick = (event) => {
  if (event.target.tagName === 'BUTTON') {
    alert(`Button ${event.target.textContent} clicked!`);
  }
};

const App = () => {
  return (
    div onClick={handleClick}>
      button>1button>
      button>2button>
      button>3button>
    div>
  );
};

export default App;