رد فعل الأحداث
تمامًا مثل أحداث HTML DOM ، يمكن لـ React تنفيذ إجراءات بناءً على أحداث المستخدم.
React لها نفس الأحداث مثل HTML: النقر ، التغيير ، تمرير الماوس وما إلى ذلك.
مضيفا الأحداث
تتم كتابة أحداث التفاعل في صيغة حالة الجمل:
onClick
بدلا من onclick
.
تتم كتابة معالجات أحداث التفاعل داخل أقواس معقوفة:
onClick={shoot}
بدلا من
onClick="shoot()"
.
تتفاعل:
<button onClick={shoot}>Take the Shot!</button>
لغة البرمجة:
<button onclick="shoot()">Take the Shot!</button>
مثال:
ضع shoot
الوظيفة داخل
Football
المكون:
function Football() {
const shoot = () => {
alert("Great Shot!");
}
return (
<button onClick={shoot}>Take the shot!</button>
);
}
ReactDOM.render(<Football />, document.getElementById('root'));
الحصول على شهادة!
أكمل وحدات React ، ونفّذ التمارين ، وخذ الامتحان واحصل على شهادة w3schools !!
95 دولارًا ENROLL
الحجج العابرة
لتمرير وسيطة إلى معالج الأحداث ، استخدم دالة السهم.
مثال:
أرسل "هدف!" كمعامل shoot
للوظيفة ، باستخدام وظيفة السهم:
function Football() {
const shoot = (a) => {
alert(a);
}
return (
<button onClick={() => shoot("Goal!")}>Take the shot!</button>
);
}
ReactDOM.render(<Football />, document.getElementById('root'));
رد فعل كائن الحدث
يمكن لمعالجات الأحداث الوصول إلى حدث React الذي أطلق الدالة.
في مثالنا الحدث هو حدث "click".
مثال:
وظيفة السهم: إرسال كائن الحدث يدويًا:
function Football() {
const shoot = (a, b) => {
alert(b.type);
/*
'b' represents the React event that triggered the function,
in this case the 'click' event
*/
}
return (
<button onClick={(event) => shoot("Goal!", event)}>Take the shot!</button>
);
}
ReactDOM.render(<Football />, document.getElementById('root'));
سيكون هذا مفيدًا عندما ننظر إلى النموذج في فصل لاحق.