از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
راهنمای React ManagementEvents معمولاً نوعی تعامل بین کاربر و برنامه را نشان می دهد – هر زمان که کاربر کلیک می کند روی شی ، انواع موجود در قسمت ورودی ، مقداری عنصر را بکشید یا رها کنید و بنابراین روی. بنابراین ، هر رویداد معمولاً به نوعی واکنش از برنامه نیاز دارد. هر بار یک …
سرفصلهای مطلب
معرفی
رویدادها معمولاً نوعی تعامل بین کاربر و برنامه را نشان می دهند – هر زمان که کاربر کلیک می کند روی شی، در فیلد ورودی تایپ می کند، برخی از عناصر را بکشید یا رها کنید، و غیره روی. بنابراین ، هر رویداد معمولاً به نوعی نیاز دارد واکنش از برنامه هر بار که یک رویداد مهم رخ می دهد ، ما به عنوان برنامه نویسان می توانیم تابعی را برای پاسخ به رویداد رخ داده تعریف کنیم. آن توابع نامیده می شوند گردانندگان رویداد، و آنها اصلی ترین مدیریت رویداد در هر زبان برنامه نویسی هستند. مدیریت رویداد مجموعه ای از تکنیک های مورد استفاده برای رسیدگی مناسبت ها.
React هم فرقی نمی کند! در این راهنما ، ما در React عمیق تر به مفهوم مدیریت رویداد می پردازیم. ما به چندین نوع مختلف از رویدادها و همچنین مکانیسم هایی که برای رسیدگی به آن وقایع استفاده می شود ، نگاهی خواهیم انداخت.
تفاوت بین مدیریت رویداد DOM و React
اگر از React استفاده می کنید ، احتمالاً قبلاً با آن آشنا هستید رویدادهای DOM در جاوا اسکریپت:
<!- JavaScript event ->
<button onclick="handleClick()">
Trigger Function
</button>
این است onclick رویداد DOM. وقتی روی این دکمه مثال کلیک کنید handleClick() عملکرد نامیده می شود – این اصل اساسی مدیریت رویداد است. این ایده اساسی بین JavaScript و React به اشتراک گذاشته شده است ، اما چند تفاوت وجود دارد که این دو نفر را متمایز می کند.
اول از همه ، تفاوت جزئی در نامگذاری رویداد وجود دارد – React Use مورد شتر اسامی به جای حروف کوچک نام های استفاده شده توسط جاوا اسکریپت پس از نگاهی گذرا به مثال قبلی ، متوجه خواهید شد که نام این رویداد است onclickو جایگزین React است onClick. علاوه بر این، React از JSX (جاوا اسکریپت XML)، که به ما اجازه می دهد تا به جای یک رشته ، عملکردی را به عنوان کنترل کننده رویداد (در داخل بریس های فرفری) منتقل کنیم:
<!- React event ->
<button onClick={handleClick}>
Trigger Function
</button>
توجه داشته باشید که چگونه ما با آن تماس نگرفتیم handleClick عملکرد داخل براکت های فرفری – فراخوانی آن توسط {handleClick()} هر بار که یک عنصر رندر می شود، تابع handler را فراخوانی می کند. نحوی که ما استفاده کرده‌ایم تضمین می‌کند که تابع handler تنها زمانی فراخوانی می‌شود که رویداد ثبت شده باشد.
اغلب اوقات شما در موقعیتی قرار می گیرید که می خواهید از رفتار پیش فرض پس از ثبت رویداد جلوگیری کنید. به عنوان مثال onsubmit رویداد جاوا اسکریپت پس از کلیک کاربر روی دکمه ارسال ثبت می شود. رفتار پیش‌فرض این است که داده‌های فرم را به‌طور مناسب ارسال کنید و وب را دوباره بارگیری کنید page، اما ممکن است لازم باشد از بارگیری مجدد جلوگیری کنیم page. جاوا اسکریپت یک ترفند مفید برای جلوگیری از رفتار پیش فرض در آستین خود دارد:
<form onsubmit="console.log('You clicked submit.'); return false">
<button type="submit">Submit</button>
</form>
ما تابع handler را به روش معمول تعریف کرده‌ایم، اما توجه کنید که چگونه اضافه کرده‌ایم return false پس از تعریف تابع کنترلر. این راهی است که توسعه دهندگان جاوا اسکریپت از رفتار پیش فرض هنگام مدیریت رویدادها جلوگیری می کنند. اگر قرار ندهید return false بعد از تابع handler در این مثال، the page قبل از بارگیری مجدد خواهد شد console حتی فرصتی برای ثبت پیام دریافت می کند.
توجه داشته باشید: یک تابع کنترل کننده رویداد را می توان در یک فایل جاوا اسکریپت تعریف کرد و زمانی که یک رویداد شناسایی شد در HTML فراخوانی شد. همچنین، می‌توانید تابع handler را مستقیماً در کد HTML تعریف و فراخوانی کنید (همانطور که در مثال بالا مشاهده می‌کنید).
React به سادگی از این ترفند پشتیبانی نمی کند! برای جلوگیری از رفتار پیش‌فرض در React، باید صریحاً تماس بگیرید preventDefault:
function Form() {
function handleSubmit(e) {
e.preventDefault();
console.log("You clicked submit.");
}
return (
<form onSubmit={handleSubmit}>
<button type="submit">Submit</button>
</form>
);
}
شاید به سادگی مدیریت رویداد در جاوا اسکریپت نباشد، اما مطمئناً روشی قوی تر برای مدیریت رویدادها است. این مثال مدیریت رویداد در حال استفاده با یک جزء کاربردی در React را نشان می‌دهد. ما به سادگی یک تابع handler را در کامپوننت اعلام کرده ایم و آن را در داخل فراخوانی کرده ایم return() روش.
توجه داشته باشید: React از سازگاری بین مرورگرها مراقبت می کند، بنابراین لازم نیست نگران آن باشید!
مدیریت رویدادها در اجزای عملکردی
کنترل کننده رویداد به عنوان یک ویژگی به یک عنصر یا جزء در یک جزء تابعی ارسال می شود. هنگامی که کاربر با عنصر تعامل می کند، این ویژگی تابعی را دریافت می کند که اتفاقات را توصیف می کند.
رسیدگی روی کلیک کنید رویداد
اگر کاربر چندین بار روی عنصر کلیک کند، onClick رویداد راه اندازی می شود و تابع چندین بار فراخوانی می شود، درست مانند هر رویداد دیگری. بیایید ببینیم که در عمل چگونه به نظر می رسد، یک دکمه ایجاد می کنیم و یک تابع را فراخوانی می کنیم:
const App = () => {
const handleClick = () => {
console.log("This function has been triggered!");
};
return (
<div className="App">
<h1>Hello World</h1>
<button onClick={handleClick}>Trigger Function</button>
</div>
);
};
این از سیستم خارج می شود “این عملکرد فعال شده است!” در console.
انتقال پارامترها به رویدادها
اگر بخواهیم پارامترها یا مقادیری را به تابعی که راه اندازی می شود ارسال کنیم، باید از یک تابع پیکان یا یک تابع واقعی استفاده کنیم. در مورد ما، فرض کنید می‌خواهیم یک مقدار را به تابع ارسال کنیم و سپس آن را وارد کنیم console:
const App = () => {
const handleClick = (name) => {
console.log("My Name is:", name);
};
return (
<div className="App">
<h1>Hello World</h1>
<button onClick={() => handleClick("John Doe")}>
Trigger Function
</button>
</div>
);
};
این نشان می دهد “نام من: جان دو” در console. ما همچنین می توانیم از یک تابع واقعی با استفاده از کلمه کلیدی تابع استفاده کنیم و همه چیز همچنان عالی کار می کند:
<button onClick={function(){handleClick('John Doe')}}>Trigger Function</button>
رسیدگی در ارسال رویداد
همچنین زمانی که کاربر روی دکمه ارسال کلیک می‌کند یا روی کلید enter ضربه می‌زند، می‌توانیم رویدادهای ارسال فرم را با React مدیریت کنیم روی صفحه کلید. این به طور مشابه به کار گرفته می شود onClick رویداد:
const App = () => {
const handleSubmit = () => {
console.log("The submit button was clicked!");
};
return (
<div className="App">
<h1>Hello World</h1>
<form onSubmit={handleSubmit}>
<label>Name</label>
<input type="text" />
<button type="submit">Submit</button>
</form>
</div>
);
};
“دکمه ارسال کلیک شد!” در نتیجه از سیستم خارج می شود. با این حال، چون مرورگر فوراً بارگیری می شود، ما از آن استفاده خواهیم کرد preventDefault() روشی برای جلوگیری از انجام عملکرد پیش فرض مرورگر.
const handleSubmit = (e) => {
e.preventDefault();
console.log("The submit button was clicked!");
};
مدیریت رویدادها در اجزای کلاس
اجزای کلاس با چند تفاوت جزئی، رویدادها را مشابه اجزای عملکردی مدیریت می کنند. بیایید یک دکمه ایجاد کنیم که آن را فراخوانی می کند handleClick عملکرد هنگام کلیک کردن:
class App extends React.Component {
handleClick = () => {
console.log("This function has been triggered!");
};
render() {
return (
<div className="App">
<h1>Hello World</h1>
<button onClick={this.handleClick}>Trigger Function</button>
</div>
);
}
}
توجه داشته باشید: باید استفاده کنیم this کلمه کلیدی چون ما در App کلاس، و handleClick یکی از توابع عضو آن کلاس است.
انتقال پارامترها به رویدادها
بهترین کار این است که تابع handler را به عنوان یک متد در جزء کلاس اعلام کنیم. اگر می‌خواهید بعداً پارامترها، props یا حالت‌ها را به مؤلفه رندر شده ارسال کنید، باید تابع مدیریت رویداد را به آن متصل کنید. this داخل سازنده
بیایید بگوییم که ما یک مجموعه مقدار حالت داریم که می خواهیم هنگام کلیک بر روی یک دکمه خاص تغییر کنیم و می خواهیم از پارامتر عبور داده شده استفاده کنیم ، ما چیزی شبیه به این خواهیم داشت ، اما این چنین است خطا پرتاب کنید:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
title: "Welcome, We are glad you are here!"
};
}
handleClick = (name) => {
console.log("This function has been triggered!", name);
this.setState({
title: `Hello ${name}!`
});
};
render() {
return (
<div className="App">
<h1>{this.state.title}</h1>
<button onClick={this.handleClick("Joel")}>
Trigger Function
</button>
</div>
);
}
}
برای حل مشکل، ما یا استفاده می کنیم توابع فلش یا Function.prototype.bind) برای بستن this کلمه کلیدی:
<button onClick={() => this.handleClick("John Doe")}>Trigger Function</button>
<button onClick={this.handleClick.bind(this, "John Doe")}>Trigger Function</button>
رسیدگی در ارسال رویداد
ما همچنین می‌توانیم انواع رویدادها را با مؤلفه‌های کلاس، تا زمانی که از آن استفاده کنیم، مدیریت کنیم this کلمه کلیدی به جای تابع هنگام اعلان متدها:
class App extends React.Component {
handleSubmit = (e) => {
e.preventDefault();
console.log("The submit button was clicked!");
};
render() {
return (
<div className="App">
<h1>Hello World</h1>
<form onSubmit={this.handleSubmit}>
<label>Name</label>
<input type="text" />
<button type="submit">Submit</button>
</form>
</div>
);
}
}
نتیجه
ما در این راهنما دیدیم که رویدادهای React بسیار شبیه به رویدادهای جاوا اسکریپت هستند، با کمی تفاوت در نحو و رفتار انتشار. ما همچنین تمایز بین دستگیران رویداد مورد استفاده در مؤلفه های کاربردی و کلاس را یاد گرفتیم ، با این که مؤلفه کلاس نیاز به اتصال گیرنده ها دارد this. رویدادهای بسیار بیشتری وجود دارد که می توان در React مدیریت کرد، اما همه آنها به همان شیوه عمل می کنند onClick روش، چه در یک جزء تابعی یا یک کلاس.
منتشر شده در 1403-01-10 06:14:04
