Reactالأحداث

مفهوم الأحداث في React

الحدث ( Event ) هو أي فعل يحدث بواسطة المستخدم مثل قيامه بالنقر على زر ما، إدخال بيانات في حقل نصي، تحريك الماوس، لمس الشاشة و غيرها من الأمور التي يمكنه فعلها، بالإضافة إلى أي فعل يحدث في المتصفح كحدوث أي تغيير في حجم الصفحة، إكتمال تحميل محتوى الصفحة، حصول خطأ ما أثناء تحميل ملفات الصفحة و غيرها.

آلية عمل الأحداث

قامت React ببناء أحداث مشابهة للأحداث الإفتراضية الموجودة في HTML DOM بحيث أنه عندما يتم إطلاق الحدث في React فإنه سيتحول إلى الحدث الأصلي الموجود في HTML DOM.

الأحداث الأكثر استخداماً في React

فيما يلي أهم الأحداث التي يمكن إضافتها لعناصر واجهة المستخدم، و لاحظ أنه يجب كتابة أسماءها بأسلوب Camel Case، بمعنى أن الحرف الأول في بداية كل كلمة جديدة من إسم الحدث يتم كتابته كحرف كبير.

أحداث الماوس

• OnClick _ يتم إطلاق هذا الحدث عند النقر على العنصر.
• onDoubleClick _ يتم إطلاق هذا الحدث عند النقر مرتين و بسرعة على العنصر.
• onMouseOver _ يتم إطلاق هذا الحدث عند تمرير مؤشر الماوس على العنصر.
• onMouseDown _ يتم إطلاق هذا الحدث عند النقر بواسطة الماوس على العنصر.
• onMouseUp _ يتم إطلاق هذا الحدث عند تحرير الماوس من العنصر.
• onContextMenu _ يتم إطلاق هذا الحدث عند النقر بزر الماوس الأيمن على العنصر بهدف إظهار قائمة الخيارات

أحداث الكيبورد

• onKeyDown _ يتم إطلاق هذا الحدث عند النقر على الزر.
• onKeyPress _ يتم إطلاق هذا الحدث طالما أن الإصبع لا يزال على الزر
• onKeyUp _ يتم إطلاق هذا الحدث عند رفع الإصبع عن الزر.
• onFocus _ يتم إطلاق هذا الحدث عند الوقوف عند عنصر إدخال.
• onBlur _ يتم إطلاق هذا الحدث عند الخروج من عنصر الإدخال.

أحداث النموذج

• onChange _ يتم إطلاق هذا الحدث عند تغيير إحدى قيم عناصره.
• onSubmit _ يتم إطلاق هذا الحدث عند إرسال بيانات النموذج
• onReset _ يتم إطلاق هذا الحدث عند إعادة القيم الأولية في النموذج.

أحداث الصفحة

• onLoad _ يتم إطلاق هذا الحدث عندما يتم تحميل كل محتوى الصفحة.
• onError _ يتم إطلاق هذا الحدث إذا حدث خطأ أثناء محاولة إحضار ملف تابع للصفحة.
• onScroll _ يتم إطلاق هذا الحدث عندما يتحرك شريط التمرير الخاص بالصفحة.
• onResize _ يتم إطلاق هذا الحدث عندما يتم تغيير حجم الصفحة.

أحداث اللمس

• onTouchStart _ يتم إطلاق هذا الحدث عندما يتم لمس العنصر.
• onTouchMove _ يتم إطلاق هذا الحدث طالما أن العنصر لا يزال ملموساً
• onTouchEnd _ يتم إطلاق هذا الحدث عندما يتوقف لمس العنصر.
• onTouchCancel _ يتم إطلاق هذا الحدث عند توقف اللمس بسبب مفاجئ.

تحضير مشروع للتطبيق العملي

إفعل الخطوات التالية حتى تقوم ببناء مشروع جديد و تطبق فيه الأمثلة كما فعلنا بالضبط:

1. قم ببناء مشروع جديد إسمه demo-app.
2. بداخل المجلد src تجد مجلد إسمه App.js قم بحذف كل الكود الإفتراضي الموجود فيه.

إضافة حدث للعنصر في React

في React نستخدم أقواس البداية و النهاية { } عند تحديد الدالة التي سينفذها الحدث.
فمثلاً نكتب onClick={demo} و ليس onclick="demo()" كما هو متعارف عليه في HTML.

في المثال التالي، بداخل المكوّن <App> قمنا بتجهيز دالة إسمها showMessage() تقوم بإظهار نافذة تنبيه عندما يتم استدعاءها.
في هذا المكوّن أيضاً قمنا بعرض زر، و أضفنا له الحدث onClick و ربطناه بالدالة ShowMessage حتى يتم تنفيذها عندما يتم النقر عليه.

// و كل ما يحتويه من وسوم و دوال <App> هنا قمنا بتعريف المكون
function App() {
    {/* تقوم بإظهار رسالة تنبيه عندما يتم استدعاءها showMessage هنا قمنا بإنشاء دالة إسمها */}
    const showMessage = () => {
        alert("The click event is fired");
    }

    {/* كلما تم النقر عليه showMessage() لجعله ينفذ الدالة <button> للوسم onClick هنا قمنا بإضافة الحدث */}
    return (
        <button onClick={showMessage}>Click Me</button>
    );
}

// يمكن الوصول إليه من خارج هذا الملف لأنه المكون App هنا قمنا بجعل المكون
// index.html  الرئيسي في الصفحة و الذي يتم تضمينه بشكل تلقائي في الملف
export default App;

تمرير قيمة للحدث في React

في المثال التالي، قمنا بإضافة باراميتر إسمه name للدالة showMessage() مما يعني أنه يجب تمرير قيمة له عند استدعاء الدالة.

بما أنه في الحدث يمكننا فقط تحديد إسم الدالة التي ستتنفذ، فهذا يعني أننا لن نتمكن من استدعاء الدالة showMessage() بشكل مباشر لأنها بحاجة إلى تمرير قيمة للباراميتر name و لهذا سنحل هذه المشكلة باستخدام دالة وسيطة بينهما إسمها callShowMessage() و التي من خلالها سنقوم باستدعاء الدالة showMessage() و تمرير القيمة لها.

إذاً عند حصول الحدث onClick سيتم استدعاء الدالة callShowMessage() و التي بدورها ستقوم باستدعاء الدالة showMessage().

// و كل ما يحتويه من وسوم و دوال <App> هنا قمنا بتعريف المكون
function App() {
    {/* تقوم بإظهار رسالة تنبيه عندما يتم استدعاءها showMessage هنا قمنا بإنشاء دالة إسمها */}
    const showMessage = (name) => {
        alert("Welcome to " + name);
    }
    
    {/* showMessage() عندما يتم استدعاءها تقوم باستدعاء الدالة callShowMessage هنا قمنا بإنشاء دالة إسمها */}
    const callShowMessage = () => {
        showMessage("Harmash");
    }

    {/* كلما تم النقر عليه callShowMessage() لجعله ينفذ الدالة <button> للوسم onClick هنا قمنا بإضافة الحدث */}
    return (
        <button onClick={callShowMessage}>Click Me</button>
    );
}

// يمكن الوصول إليه من خارج هذا الملف لأنه المكون App هنا قمنا بجعل المكون
// index.html  الرئيسي في الصفحة و الذي يتم تضمينه بشكل تلقائي في الملف
export default App;

أسلوب كتابة الكود في المثال السابق يعتبر بسيط جداً و سهل الفهم و لكننا نستطيع كتابته بشكل مختصر، حيث أنه بدلاً من إنشاء الدالة callShowMessage() و التي مهمتها فقط استدعاء الدالة showMessage() فإنه باستطاعتنا إنشاء دالة جديدة بشكل مباشر في الحدث onClick و بداخلها نقوم باستدعاء الدالة showMessage() مع تمرير قيمة للباراميتر name.

إذاً عند حصول الحدث onClick سيتم استدعاء الدالة المكتوبة بهذا الشكل ()=> و التي بدورها ستقوم باستدعاء الدالة showMessage().

// و كل ما يحتويه من وسوم و دوال <App> هنا قمنا بتعريف المكون
function App() {
    {/* تقوم بإظهار رسالة تنبيه عندما يتم استدعاءها showMessage هنا قمنا بإنشاء دالة إسمها */}
    const showMessage = (name) => {
        alert("Welcome to " + name);
    }

    {/* كلما تم النقر عليه showMessage() لجعله ينفذ الدالة <button> للوسم onClick هنا قمنا بإضافة الحدث */}
    return (
        <button onClick={() => showMessage("Harmash")}>Click Me</button>
    );
}

// يمكن الوصول إليه من خارج هذا الملف لأنه المكون App هنا قمنا بجعل المكون
// index.html  الرئيسي في الصفحة و الذي يتم تضمينه بشكل تلقائي في الملف
export default App;

الحصول على معلومات الحدث في React

لنتمكن من الحصول على كل معلومات الحدث الذي حصل، يمكننا إضافة باراميتر واحد (أياً كان إسمه) في الدالة التي سينفذها الحدث و هكذا سيتم تخزين كائن يمثل الحدث في هذا الباراميتر.

في المثال التالي قمنا بإضافة الحدث onClick للزر و مررنا له باراميتر في الدلة التي سينفذها حيث كتبنا (event) => مما يعني أنه سيتم وضع كل معلومات الحدث الذي حصل ككائن في الباراميتر event.

عند حصول الحدث onClick سيتم استدعاء الدالة showMessage() و تمرير النص "Harmash" و الكائن المخزن في الباراميتر event لها، و هي ستقوم بطباعة محتوياتهما في كرسالة تنبيه.

// و كل ما يحتويه من وسوم و دوال <App> هنا قمنا بتعريف المكون
function App() {
    {/* تحتوي على باراميترين، الأول سيحتوي على قيمة عادية و الثاني على الحدث نفسه showMessage هنا قمنا بإنشاء دالة إسمها */} 
    {/*مهمة الدالة إظهار رسالة تنبيه فيها قيمة الباراميتر الأول و نوع الحدث الموجود في الباراميتر الثاني */}
    const showMessage = (data, event) => {
        alert("Data = " + data + "\n" + "Event Type = " + event.type);
    }

    {/* كلما تم النقر عليه showMessage() لجعله ينفذ الدالة <button> للوسم onClick هنا قمنا بإضافة الحدث */}
    {/* event و الثانية هي الحدث نفسه الذي يمثله الباراميتر "Harmash" لاحظ أننا مررنا للدالة قميتين، الأولى هي النص */}
    return (
        <button onClick={(event) => showMessage("Harmash", event)}>Click Me</button>
    );
}

// يمكن الوصول إليه من خارج هذا الملف لأنه المكون App هنا قمنا بجعل المكون
// index.html  الرئيسي في الصفحة و الذي يتم تضمينه بشكل تلقائي في الملف
export default App;