react-applications-ریکت-کاربردهادوره رایگان-الگوریتم اول-free-آموزش کامل

لطفا صبر کنید...

مدیریت ایونت‌ها (Events) در React

ایونت‌ها در React مشابه رویدادهای جاوااسکریپت (JavaScript Events) هستند، اما با یک تفاوت مهم:
در React، ایونت‌ها به‌جای نام‌های کوچک (onclick) به‌صورت CamelCase (onClick) نوشته می‌شوند.

 

مدیریت ایونت‌ها در کامپوننت‌های فانکشنی (با Hooks)

در کامپوننت‌های فانکشنی می‌توان از useState برای تغییر مقدار State هنگام وقوع ایونت استفاده کرد.

مثال: کلیک روی دکمه برای تغییر مقدار State

import React, { useState } from "react";
const Counter = () => {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount(count + 1);
  };
  return (
    <div>
      <h1>عدد: {count}</h1>
      <button onClick={handleClick}>افزایش</button>
    </div>
  );
};
export default Counter;

 

✔ onClick={handleClick} تابع handleClick را هنگام کلیک اجرا می‌کند.
✔ مقدار count با setCount(count + 1) افزایش می‌یابد.

 

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

در کامپوننت‌های کلاسی باید از this برای دسترسی به متدها استفاده کنیم و معمولاً لازم است متدها را bind کنیم.

مثال: کلیک روی دکمه برای افزایش مقدار State

import React, { Component } from "react";
class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };
  render() {
    return (
      <div>
        <h1>عدد: {this.state.count}</h1>
        <button onClick={this.handleClick}>افزایش</button>
      </div>
    );
  }
}
export default Counter;

 

✔ در کامپوننت‌های کلاسی بهتر است از Arrow Function برای متدهای ایونت استفاده کنیم تا نیازی به .bind(this) نداشته باشیم.

ارسال آرگومان در ایونت‌ها

گاهی نیاز داریم مقداری را به تابع ایونت ارسال کنیم.

روش ۱: استفاده از Arrow Function در JSX

<button onClick={() => handleClick(5)}>افزایش ۵ تایی</button>

✔ این روش راحت است اما در هر رندر، تابع جدیدی ساخته می‌شود که ممکن است باعث افت عملکرد شود.

✅ روش ۲: استفاده از bind()

<button onClick={handleClick.bind(this, 5)}>افزایش ۵ تایی</button>

✔ این روش در کامپوننت‌های کلاسی کاربرد دارد اما استفاده از Arrow Function در متد بهتر است.

 

مدیریت سایر ایونت‌ها در React

✅ مدیریت ایونت تغییر مقدار ورودی (onChange)

const InputField = () => {
  const [text, setText] = useState("");
  return (
    <div>
      <input type="text" onChange={(e) => setText(e.target.value)} />
      <p>متن: {text}</p>
    </div>
  );
};

 

✔ مقدار ورودی از e.target.value گرفته شده و در State ذخیره می‌شود.

جلوگیری از رفتار پیش‌فرض در ایونت‌ها (Prevent Default)

برخی ایونت‌ها مانند submit فرم، رفتار پیش‌فرضی دارند که ممکن است نخواهیم اتفاق بیفتد. برای این کار از event.preventDefault() استفاده می‌کنیم.

✨ مثال: جلوگیری از ریفرش صفحه در فرم

const Form = () => {
  const handleSubmit = (event) => {
    event.preventDefault();
    alert("فرم ارسال شد!");
  };
  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">ارسال</button>
    </form>
  );
};

✔ event.preventDefault() مانع از ریفرش صفحه هنگام ارسال فرم می‌شود.

 

استفاده از onMouseEnter و onMouseLeave برای هاور (Hover)

const HoverBox = () => {
  const [isHovered, setIsHovered] = useState(false);
  return (
    <div
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      style={{
        width: "200px",
        height: "100px",
        backgroundColor: isHovered ? "lightblue" : "lightgray",
        textAlign: "center",
        lineHeight: "100px",
      }}
    >
      {isHovered ? "هاور شد!" : "هاور کن!"}
    </div>
  );
};

✔ هنگام هاور، رنگ پس‌زمینه تغییر می‌کند.

 

جمع‌بندی و نکات مهم

✅ در React ایونت‌ها به‌صورت CamelCase (onClick, onChange, ...) نوشته می‌شوند.
✅ در کامپوننت‌های فانکشنی از useState و Arrow Function استفاده می‌شود.
✅ در کامپوننت‌های کلاسی باید متدها را bind کنیم یا از Arrow Function در متدها استفاده کنیم.
✅ می‌توان از event.preventDefault() برای جلوگیری از رفتار پیش‌فرض استفاده کرد.
✅ برای ارسال آرگومان می‌توان از Arrow Function در JSX یا bind() استفاده کرد.