رویدادها Event در React

هدایت عباسی آموزش جاوا اسکریپت

در این بخش از آموزش React از تاپ سایت 98 به بحث رویدادها در React می پردازیم. هنگامی که کاربر کلیک می کند، دکمه موس را به طرف پایین فشار می دهد یا آن را رها می کند می تواند اتفاقی بفتد که به آن رویداد Event می گوییم.

افزودن رویداد در React

به مثال زیر توجه کنید. در کامپوننت Football یک Function قرار داده ایم که یک پیغام را نشان می دهد.

چنانچه کاربر بر روی دکمه کلیک کند رویداد onClick اتفاق می افتد و Function شوت (shoot) اجرا می شود. توجه نمایید اولین حرف click باید بصورت بزرگ باشد وگرنه با پیغام خطا مواجه می شوید.

import React from 'react';
import ReactDOM from 'react-dom';
function Football() {
const shoot = () => {
alert("Great Shot!");
}
return (
<button onClick={shoot}>Take the shot!</button>
);
}
ReactDOM.render(<Football />, document.getElementById('root'));

افزودن آرگومان

برای افزودن آرگومان در React می توانید از روش زیر استفاده کنید. هنگامی که رویداد کلیک onClick اتفاق می افتد مقدار نیز ارسال می شود و پیغام هنگام کلیک، نمایش داده می شود.

ما مقدار topsite98 را ارسال کرده ایم و پس از رویداد کلیک، نمایش داده می شود.

import React from 'react';
import ReactDOM from 'react-dom';
function Football() {
const shoot = (a) => {
alert(a);
}
return (
<button onClick={() => shoot("topsite98")}>Take the shot!</button>
);
}
ReactDOM.render(<Football />, document.getElementById('root'));

شمارنده در React

در پروژه زیر یک شمارنده را ایجاد کرده ایم که با هر بار کلیک، یک عدد به آن اضافه می شود.

ابتدا یک مقدار اولیه صفر می گیرد و سپس با رویداد کلیک دکمه Button، یک عدد به آن اضافه می شود.

اگر با بعضی مفاهیم آشنا نیستید در ادامه یاد خواهید گرفت پس نگران نباشید.

import * as React from 'react';
function App() {
const [count, setCount] = React.useState(0);
const handleClick = () => {
setCount(count + 1);
};
return (
<button type="button" onClick={handleClick}>
Count: {count}
</button>
);
}
export default App;

امیدواریم این بخش از آموزش، برای شما عزیزان مفید بوده باشد.

موفق باشید.

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

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید