مدیریت ایونتها (Events) در React
ایونتها در React مشابه رویدادهای جاوااسکریپت (JavaScript Events) هستند، اما با یک تفاوت مهم:
در React، ایونتها بهجای نامهای کوچک (onclick) بهصورت CamelCase (onClick) نوشته میشوند.
مدیریت ایونتها در کامپوننتهای فانکشنی (با Hooks)
در کامپوننتهای فانکشنی میتوان از useState
برای تغییر مقدار State هنگام وقوع ایونت استفاده کرد.
مثال: کلیک روی دکمه برای تغییر مقدار State
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
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
✔ این روش راحت است اما در هر رندر، تابع جدیدی ساخته میشود که ممکن است باعث افت عملکرد شود.
✅ روش ۲: استفاده از bind()
✔ این روش در کامپوننتهای کلاسی کاربرد دارد اما استفاده از Arrow Function در متد بهتر است.
مدیریت سایر ایونتها در React
✅ مدیریت ایونت تغییر مقدار ورودی (onChange)
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 handleSubmit = (event) => {
event.preventDefault();
alert("فرم ارسال شد!");
};
return (
<form onSubmit={handleSubmit}>
<button type="submit">ارسال</button>
</form>
);
};
✔ event.preventDefault()
مانع از ریفرش صفحه هنگام ارسال فرم میشود.
استفاده از onMouseEnter
و onMouseLeave
برای هاور (Hover)
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()
استفاده کرد.
