ابدأ مع React


الدرس: التفاعل مع المكونات الخاصة بك بفضل الأحداث (events)


الصفحة السابقة

أتقن الأحداث (events) في React



React
إذا سبق لك العمل باستخدام JavaScript ، فمن المحتمل أنك على دراية بالأحداث بالفعل. حسنًا ، لا يزال لديك الحق في تذكير بسيط: الحدث هو رد فعل على إجراء صادر عن المستخدم ، مثل النقر على زر أو إدخال نص في نموذج.

بشرى سارة لك: بفضل تركيبتها المريحة والموجزة ، تجعل React التعامل مع أحداث DOM أسهل كثيرًا. 🎉

تعرف على بناء الجملة


بعض خصائص إعلان حدث في React :

  • يتم كتابة الحدث في علامة camelCase؛
  • يقع اعلان الحدث الذي سيقع التقاطه  ويتم تمريره بين الأقواس  الوظيفة التي سيقع استدعائها .
  • على عكس JS ، في جميع الحالات تقريبًا لا تحتاج إلى استخدام addEventListener  .
دعنا نختبر ذلك الآن في الكود الخاص بنا. في components/PlantItem.js، سأعلن عن وظيفة handleClick ستسجل الدخول إلى وحدة التحكم الخاصة بنا:

function handleClick() {
    console.log('✨ Ceci est un clic ✨')
}
 
نضيف الآن   onClick={handleClick}    في العلامة li للمكون    PlantItem . اذا لدينا :


<li className='lmj-plant-item' onClick={handleClick}>
    <img className='lmj-plant-item-cover' src={cover} alt={`${name} cover`} />
    {name}
    <div>
        <CareScale careType='water' scaleValue={water} />
        <CareScale careType='light' scaleValue={light} />
    </div>
</li>
 
أفتح وحدة التحكم: نعم! يعمل كما هو متوقع! 🎉

سآخذ هذا التمرين إلى أبعد من ذلك: سنطلق تنبيهًا يعرض اسم النبات الذي نقرنا عليه.

نُمرر   plantName في معلمة لـ handleClick كما هنا:


function handleClick(plantName) {
    alert(`Vous voulez acheter 1 ${plantName} ? Très bon choix 🌱✨`)
}
 
ولكن إذا نقرت ، فلن يعمل:

React
لا يُطلق على أي من نباتاتنا اسم  1 [object Object]

هذا لأن React يتم ضبطه افتراضيًا على كائن (والذي سنقوم بتغطيته خلال بضع دقائق) ، لكننا هنا نريد تحديد حجتنا الخاصة به.

لذلك ، الأمر بسيط للغاية: نعلن عن وظيفة مباشرة في  onClick   . ستستدعي هذه الوظيفة handleClick بتمريرها كمعامل   name   . اذا لدينا:


onClick={() => handleClick(name)}
 
حاول أن ترى!

وها أنت ذا! 😎

اكتشف الأحداث الاصطناعية


لذلك ، كنت أخبرك عن الكائن الذي تقوم React بتمريره افتراضيًا كمعامل للوظائف المشار إليها في رد نداء الحدث. دعونا نرى كيف يبدو. 🕵️‍♀️

إذا حصلت على المعلمة في handleClick   :


function handleClick(e) {
    console.log('✨ Ceci est mon event :', e)
}
 
أحصل على هذا:
React
وحدة التحكم في هذا الحدث

انطلق ، حاول أن تفعل ذلك بنفسك!

هذا يعطينا الكثير من المعلومات ، أليس كذلك؟ لكن ما الذي يتوافق معه؟ 🤔

إنه في الواقع حدث اصطناعي . باختصار ، هذه هي نفس واجهة أحداث DOM الأصلية ، باستثناء أنها متوافقة مع جميع المتصفحات.

ملائم ، أليس كذلك؟

نظرًا لأن هذه هي نفس الواجهة لأحداث DOM الأصلية ، فهل يمكننا أيضًا الوصول إلى   preventDefault   و   stopPropagation   ؟ 

تماما ! يمكنك استخدام هذه الطرق مع المعلمة التي تم استردادها في الوظيفة التي تم تمريرها إلى الحدث. في حالتنا ، كان من الممكن أن تضع   e.preventDefault()   .

إذا كنت تريد معرفة المزيد حول الأحداث الاصطناعية ، يمكنك العثور على قائمة بجميع الأحداث المدعومة هنا ..

تبسيط إنشاء النموذج الخاص بك باستخدام React



في React ، يتم تبسيط إدارة النماذج: يمكننا الوصول إلى القيمة بسهولة بالغة ، سواء كانت خانة اختيار إدخال أو منطقة نصية أو حتى تحديد باستخدام    onChange .

هناك طريقتان رئيسيتان لإدارة النماذج: الطريقة الخاضعة للرقابة والطريقة غير المنضبطة . سأغطي الطريقة غير المتحكم فيها بسرعة إلى حد ما ، لأنها تتطلب مشاركة أقل في React ، وتشجع React على استخدام النماذج الخاضعة للرقابة.

تفويض التحكم: نماذج غير خاضعة للرقابة


سأعطيكم عرضًا توضيحيًا بسيطًا عن نموذج غير متحكم فيه. على تطبيقنا ، مباشرة في    App.js، أضع مكوّنًا   QuestionForm   سأصرح به في ملف منفصل. سنقوم بإضافة حقل للسؤال.

لذلك أقوم بإنشاء نموذج يشمل مدخلاتي:


<form onSubmit={handleSubmit}>
    <input type='text' name='my_input' defaultValue='Tapez votre texte' />
    <button type='submit'>Entrer</button>
</form>
 
و ل handleSubmit ، وهذا يعطي:

function handleSubmit(e) {
    e.preventDefault()
    alert(e.target['my_input'].value)
}
 
ترى أن React يسمح لي بتحديد defaultValue    في حقل الإدخال الخاص بي. هنا أتصل    preventDefault، وإلا فسيتم   submit   تحديث الصفحة.

ولدي التنبيه الخاص بي الذي ينطلق. 🎉

بسيط جدا ، أليس كذلك؟ أنت تفوض العمل إلى DOM الخاص بك. في الواقع ، تسمح لنا النماذج غير المنضبطة بعدم الاضطرار إلى إدارة الكثير من المعلومات . لكن هذا النهج هو نوعا ما ليس "React" ، لأنه لا يفعل كل شيء.

بدلاً من ذلك ، يمكنك استخدام المكونات المراقبة.

تحكم في استماراتك


هنا ، لأريكم استخدام النماذج الخاضعة للرقابة ، سأحتاج إلى فكرة سنغطيها في الفصل التالي: الحالة. لذلك سأحاول أن أقدم لكم موجزًا ​​صغيرًا دون الخوض في التفاصيل. 

و الحالة الحالية تسمح لنا بالاحتفاظ بالمعلومات. هذه المعلومات خاصة بمكون وتأتي من تفاعل قام به المستخدم مع المكون.

لذلك سأقوم بإنشاء المتغير الخاص بي   inputValue   والوظيفة التي ستسمح لك بتغيير قيمته في الحالة المحلية باستخدام    useState .

فقط اعلم أن سطر الكود أدناه يسمح لي بالتصريح عن الحالة الأولية   inputValue   والوظيفة المقابلة لتعديلها ، وتحديد القيمة الافتراضية "اطرح سؤالك هنا" :


const [inputValue, setInputValue] = useState("اطرح سؤالك هنا")
 
لذلك لدي على QuestionForm النحو التالي:

import { useState } from 'react'

function QuestionForm() {
    const [inputValue, setInputValue] = useState('Posez votre question ici')
    return (
        <div>
            <textarea
                value={inputValue}
                onChange={(e) => setInputValue(e.target.value)}
            />
        </div>
    )
}

export default QuestionForm
 
هنا ، أقوم بتمرير وظيفة في رد الاتصال إلى   onChange   بحيث تحفظ في حالتي المحلية قيمة المدخلات الخاصة بي. يمكنني الوصول إلى القيمة المكتوبة في الإدخال بـ    e.target.value .

 inputValue    الآن لديه حق الوصول إلى محتوى مدخلاتي في جميع الأوقات. لذلك يمكنني إنشاء زر يطلق تنبيهًا يعرض محتوى إدخالي ، مثل هنا:


<div>
    <textarea
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
    />
    <button onClick={() => alert(inputValue)}>Alertez moi 🚨</button>
</div>
 
وهو يعمل بشكل جيد!

من الجيد أن يكون لديك حق الوصول إلى قيمة مدخلاتي ، ولكن لماذا؟ 🤔

افهم فوائد النماذج الخاضعة للرقابة


حسنًا ، هذا يسمح لك بالتفاعل مباشرة مع البيانات التي يدخلها المستخدم . لذلك يمكنك عرض رسالة خطأ إذا كانت البيانات غير صحيحة ، أو يمكنك تصفيتها باعتراض قيمة تالفة.

إذا قررنا أنه لا يُسمح باستخدام الحرف "f" (حسنًا ، هذا غريب بعض الشيء) ، حسنًا يمكننا إعلان متغير:

const isInputError = inputValue.includes('f') 

وعرض رسالة خطأ أم لا وفقًا لهذه القيمة المنطقية:


{isInputError && (
    <div>🔥 لا يُسمح لك باستخدام الحرف "f" هنا.</div>
)}
 
وبالمثل ، يمكننا تحديد قيمة سيئة أدخلها المستخدم. للقيام بذلك ، يجب أن تعلن عن وظيفة وسيطة:

function checkValue(value) {
    if (!value.includes('f')) {
        setInputValue(value)
    }
}
 
ونطبق التعديل في وظيفة رد الاتصال لدينا:

onChange={(e) => checkValue(e.target.value)}
 
هنا ، يمكنك الضغط على مفتاح `f` عدة مرات كما تريد ، ولن يتم تسجيل القيمة في الإدخال الخاص بك.

قد لا تدرك ذلك حتى الآن ، لكنه يمنحك الكثير من الحرية فيما يتعلق بالتحقق من الصحة الذي تريد إنشاءه ؛ وكمطور ، إنه حقًا قوي جدًا 🔥.

رائع ، أنا أعرف كلتا الطريقتين ، لكن متى أستخدم المكون الخاضع للرقابة ومتى أستخدم نسخته غير الخاضعة للرقابة ؟!

حسنًا ، هذا يعتمد على الحالة. الأمر متروك لك لتقرر وفقًا لقيودك. عندما يكون لديك مكون سريع لجعله لا يتضمن أي تعقيد ، يمكن للإدخال غير المنضبط أن يقوم بالمهمة. على العكس من ذلك ، إذا كان لديك عمليات تحقق للقيام بها ، فسيكون من الأفضل بالتأكيد المرور عبر أحد المكونات الخاضعة للرقابة. من ناحيتي ، رأيت الكثير من المكونات الخاضعة للرقابة في قواعد التعليمات البرمجية أكثر مما تمكنت من رؤيته.

اعلم أن هناك أيضًا مكتبات تتيح لك إدارة النماذج والتحقق من صحتها بشكل نظيف قدر الإمكان ، على سبيل المثال الأداة الجيدة جدًا react-hook-form  .

أنت الآن مجهز للتفاعل مع المستخدمين من خلال الأحداث والنماذج. 😎

ممارسة


React
"ستتمكن الآن من وضع كل هذا موضع التنفيذ. كالعادة ، ستجد قاعدة الكود لبدء التمرين على P2C5-Begin . هذه المرة، وهنا قليلا للقيام على ما يمكنك القيام به لإثراء التطبيق لدينا: "

  • قم بإنشاء تنبيه يتم تشغيله بالنقر فوق مكون CareScale الذي يجب أن يقول:
    • "هذا النبات يتطلب القليل / المتوسط ​​/ الكثير من الضوء / الري" وفقًا للبيانات المقابلة ؛
    • سواء كان مكون CareScale من النوع "الماء(water)" أو "الخفيف(light) " .
  • سوف تجد في قاعدة كود مكون جديد:  Footer . يجب أن تضيف :
    • إدخال لاسترداد البريد الإلكتروني للمستخدم ، من خلال تطبيق طريقة المكون الخاضع للرقابة. بناء جملة الحالة الحالية  التي استخدمناها في هذا الفصل    inputValue    و    setInputValue    الذي يستخدم useState بالفعل مكتوب في الكود .
    • الحدث   blur   (عند النقر خارج الحقل) الذي يطلق تنبيهًا إذا كانت قيمة inputValue لا تحتوي على الحرف "@" . يجب أن يذكر هذا التنبيه "تحذير ، لا يوجد @ ، هذا ليس عنوانًا صالحًا."
    يمكن إيجاد الحل في فرع P2C5-Solution .

باختصار


  • في React ، يتم كتابة الحدث في علامة    camelCase، ونقوم بتمريره وظيفة استدعاء.
  • على عكس JS ، في جميع الحالات تقريبًا لا تحتاج إلى استخدام    addEventListener .
  • تقوم React بتمرير حدث اصطناعي كمعامل لوظائف callBack . يشبه هذا الحدث التركيبي حدثًا تم تمريره محليًا في DOM ، باستثناء أنه متوافق مع جميع المتصفحات.
  • هناك طريقتان رئيسيتان لإدارة النماذج: النماذج الخاضعة للرقابة أو غير المنضبطة. يوصى باستخدام النماذج الخاضعة للرقابة.
  • تحفظ النماذج الخاضعة للرقابة قيمة الحقول في الحالة الحالية ، والوصول إلى البيانات التي يدخلها المستخدم    onChange .
  • تسمح النماذج الخاضعة للرقابة بحفظ المحتوى ، أو عرض رسالة خطأ بناءً على البيانات التي يدخلها المستخدم.
ها نحن مرة أخرى في نهاية المباراة. ستكون قادرًا على التحقق من مهاراتك في الاختبار. بعد ذلك ، بمجرد الانتهاء من ذلك ، ستتمكن من البدء في الحالة باستخدام React! 🚀