رد فعل البرنامج التعليمي الجزء 23: أول أشكال الدرس

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



→ الجزء 1: نظرة عامة على الدورة ، وأسباب شعبية React ، ReactDOM و JSX
→ الجزء 2: المكونات الوظيفية
→ الجزء 3: ملفات المكونات ، هيكل المشروع
→ الجزء 4: مكونات الوالدين والطفل
→ الجزء 5: بدء العمل في تطبيق TODO ، أساسيات التصميم
→ الجزء 6: حول بعض ميزات الدورة ، JSX وجافا سكريبت
→ الجزء 7: الأنماط المضمنة
→ الجزء 8: مواصلة العمل على تطبيق TODO ، الإلمام بخصائص المكونات
→ الجزء 9: خصائص المكون
→ الجزء 10: ورشة عمل حول العمل مع خصائص المكون والتصميم
→ الجزء 11: توليد العلامات الديناميكية وطريقة صفائف الخريطة
→ الجزء 12: ورشة العمل ، المرحلة الثالثة من العمل على طلب TODO
→ الجزء 13: المكونات القائمة على الفصل
→ الجزء 14: ورشة عمل حول المكونات القائمة على الفصل ، وحالة المكون
→ الجزء 15: ورش العمل الصحية المكونة
→ الجزء 16: المرحلة الرابعة من العمل على طلب TODO ، التعامل مع الأحداث
→ الجزء 17: المرحلة الخامسة من العمل على تطبيق TODO ، وتعديل حالة المكونات
→ الجزء 18: المرحلة السادسة من العمل على طلب TODO
→ الجزء 19: طرق دورة حياة المكون
الجزء 20: الدرس الأول في التقديم الشرطي
→ الجزء 21: الدرس الثاني وورشة العمل حول التقديم الشرطي
→ الجزء 22: المرحلة السابعة من العمل على تطبيق TODO ، وتنزيل البيانات من مصادر خارجية
→ الجزء 23: الدرس الأول حول العمل مع النماذج
→ الجزء 24: نماذج الدرس الثاني
→ الجزء 25: ورشة عمل حول العمل مع النماذج
→ الجزء 26: بنية التطبيق ، نمط الحاوية / المكون
→ الجزء 27: مشروع المقرر

الدرس 41. العمل مع النماذج ، الجزء 1

→ الأصل

النماذج هي جزء مهم من تطبيقات الويب. ولكن ، كما اتضح فيما بعد ، فإن المشاركين في تطوير React ، العمل مع النماذج عادة ما يسبب بعض الصعوبات. والحقيقة هي أن React يعمل مع الأشكال بطريقة خاصة. في هذا الدرس ، سوف نستخدم المشروع القياسي الذي تم إنشاؤه بواسطة create-react-app ، حيث يتم تقديم النموذج الأولي لملف App.js أدناه.

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {}   }     render() {       return (           <div>               Code goes here           </div>       )   } } export default App 

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

لذلك ، في React ، تعمل النماذج بشكل مختلف قليلاً عن استخدام جافا سكريبت عادي. وهي ، في الطريقة المعتادة ، يتم وصف النماذج باستخدام HTML على صفحات الويب ، وبعد ذلك ، باستخدام DOM API ، تتفاعل معهم من JavaScript. على وجه الخصوص ، من خلال النقر على زر الإرسال ، يقومون بجمع البيانات من الحقول التي تملأها المستخدم وإعدادهم لإرسالها إلى الخادم ، والتحقق منها ، وإبلاغ المستخدم ، إذا لزم الأمر ، أنه تملأ بعض الحقول بشكل غير صحيح. في React ، بدلاً من انتظار إدخال جميع المواد في حقول النموذج قبل متابعة معالجة البرامج الخاصة بهم ، تتم مراقبة البيانات باستمرار باستخدام حالة التطبيق. هذا ، على سبيل المثال ، يتلخص في حقيقة أن كل حرف يدخله المستخدم من لوحة المفاتيح يدخل الحالة على الفور. نتيجة لذلك ، في تطبيق React ، يمكننا العمل بسرعة مع أحدث إصدار لما يدخله المستخدم في حقول النموذج. من أجل توضيح هذه الفكرة في العمل ، نبدأ بوصف النموذج الذي يحتوي على حقل نص منتظم.

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

بعد ذلك ، في المُنشئ ، سنقوم بإرفاق معالج الأحداث handleChange() this وفي كود المعالج setState() وظيفة setState() . نظرًا لأن القيمة السابقة التي تم تخزينها في خاصية حالة الاسم الأول لا تهمنا ، يمكننا ببساطة تمرير كائن firstName قيمة firstName الجديد إلى هذه الوظيفة. ما ينبغي أن يكتب إلى هذا العقار؟

إذا كنت تتذكر كيفية عمل معالجات الأحداث في جافا سكريبت ، فسيتبين أنه عند استدعائهم ، يتم تمرير بعض المعلمات المحددة مسبقًا. في حالتنا ، يتم تمرير كائن الحدث إلى المعالج. أنه يحتوي على البيانات التي تهمنا. يتم تمثيل حقل النص الذي نقوم بمعالجة حدث onChange في هذا الكائن باسم event.target . ويمكن الوصول إلى محتويات هذا الحقل باستخدام إنشاء event.target.value .

الآن ، في طريقة render() ، سنقوم بإخراج ما سيتم تخزينه في الحالة وننظر إلى ما حصلنا عليه.

إليك الكود الذي ينفذ الأفكار أعلاه.

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           firstName: ""       }       this.handleChange = this.handleChange.bind(this)   }     handleChange(event) {       this.setState({           firstName: event.target.value       })   }     render() {       return (           <form>               <input type="text" placeholder="First Name" onChange={this.handleChange} />               <h1>{this.state.firstName}</h1>           </form>       )   } } export default App 

هكذا يبدو كل شيء في المتصفح.


صفحة التطبيق في المتصفح

يظهر كل حرف تم إدخاله في الحقل على الفور في العنصر <h1> الموجود في الصفحة.

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

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

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

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           firstName: "",           lastName: ""       }       this.handleChange = this.handleChange.bind(this)   }     handleChange(event) {       this.setState({           [event.target.name]: event.target.value       })   }     render() {       return (           <form>               <input type="text" name="firstName" placeholder="First Name" onChange={this.handleChange} />               <br />               <input type="text" name="lastName" placeholder="Last Name" onChange={this.handleChange} />               <h1>{this.state.firstName} {this.state.lastName}</h1>           </form>       )   } } export default App 

لاحظ أنه من خلال تعيين اسم خاصية الكائن الذي تم تمريره إلى setState() ، setState() بناء event.target.name بين قوسين مستطيلين.


صفحة التطبيق في المتصفح

تعرض الصفحة الآن ما تم إدخاله في الحقل الأول وما تم إدخاله في الحقل الثاني.

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

سنتحدث عن العمل مع عناصر النموذج الأخرى في الدرس التالي. سنناقش هنا موضوعًا آخر يتعلق بما يسمى "المكون المتحكم فيه" ، والذي قرأته بالفعل ، إذا نظرت إلى وثائق رد الفعل على النماذج.

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

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           firstName: "",           lastName: ""       }       this.handleChange = this.handleChange.bind(this)   }     handleChange(event) {       this.setState({           [event.target.name]: event.target.value       })   }     render() {       return (           <form>               <input                   type="text"                   value={this.state.firstName}                   name="firstName"                   placeholder="First Name"                   onChange={this.handleChange}               />               <br />               <input                   type="text"                   value={this.state.lastName}                   name="lastName"                   placeholder="Last Name"                   onChange={this.handleChange}               />               <h1>{this.state.firstName} {this.state.lastName}</h1>           </form>       )   } } export default App 

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

أريد أن أقدم نصيحة واحدة من شأنها أن توفر لك في المستقبل من الأخطاء التي يصعب تصحيحها. إليك ما يبدو عليه رمز معالج حدث onChange الآن:

 handleChange(event) {   this.setState({       [event.target.name]: event.target.value   }) } 

يوصى أنه بدلاً من الوصول مباشرة إلى خصائص كائن event عند إنشاء الكائن الذي تم تمريره إلى setState() ، setState() ما تحتاج إليه مسبقًا:

 handleChange(event) {   const {name, value} = event.target   this.setState({       [name]: value   }) } 

هنا لن ندخل في التفاصيل المتعلقة بالأخطاء التي يمكن تجنبها عن طريق إنشاء معالجات الأحداث بهذه الطريقة. إذا كنت مهتمًا ، فتحقق من SyntheticEvent في وثائق React.

النتائج

في هذا الدرس ، تعرفت أولاً على آليات العمل مع النماذج في React. في المرة القادمة سنواصل هذا الموضوع.

أعزائي القراء! هل تستخدم أي مكتبات إضافية عند العمل مع النماذج في React؟