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

نواصل اليوم النقاش حول استخدام النماذج في 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: مشروع المقرر

الدرس 42. العمل مع النماذج ، الجزء 2

→ الأصل

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

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           firstName: "",           lastName: ""       }       this.handleChange = this.handleChange.bind(this)   }     handleChange(event) {       const {name, value} = event.target       this.setState({           [name]: 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}               />                             {                   /**                    *    :                    *                    * <textarea />                    * <input type="checkbox" />                    * <input type="radio" />                    * <select>  <option>                    */               }                             <h1>{this.state.firstName} {this.state.lastName}</h1>           </form>       )   } } export default App 

هذا ما تبدو عليه صفحة التطبيق في المتصفح في هذه المرحلة من العمل.


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

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

في الكود أعلاه ، يوجد جزء معلق يسرد العناصر التي سنتحدث عنها. لنبدأ بالحقل لإدخال نص متعدد الأسطر - عنصر textarea . ربما يكون من الأسهل فهم كيفية العمل معه. إذا كنت تستخدم هذا العنصر عند إنشاء نماذج HTML عادية ، فأنت تعلم أن هذا ليس علامة إغلاق ذاتي ، كما كان الحال مع عنصر input . لديها أجزاء فتح وإغلاق.
أضف هذا العنصر إلى النموذج عن طريق إدراج الكود التالي مباشرة بعد التعليق:

 <br /> <textarea></textarea> 

إذا نظرت الآن إلى صفحة التطبيق ، يمكنك أن ترى كيف ظهر حقل لإدخال نص متعدد الخطوط.


حقل لإدخال النص على الصفحة

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

 <textarea /> 

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

 <textarea value={"Some default value"}/> 

سيؤدي ذلك إلى ظهور النص المحدد في الحقل عندما يتم عرضه على الصفحة.


النص الذي يظهر في الحقل

سنعود للعمل مع الحقل لإدخال نص متعدد الأسطر ، لكن الآن سنتحدث عن الأعلام. خانة الاختيار هي عنصر تحكم في input ونوعه هو checkbox . هنا هو وصفه:

 <input type="checkbox" /> 

إليك ما تبدو عليه العلامة الموصوفة في هذا الترميز على الصفحة.


خانة الاختيار

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

دعنا نجلب حالة المكون إلى هذا النموذج:

 this.state = {   firstName: "",   lastName: "",   isFriendly: true } 

يتم تغيير رمز وصف العلم كما يلي:

 <input   type="checkbox"   checked={this.state.isFriendly} /> 

بعد ذلك ، سيتم عرض مربع الاختيار المحدد على الصفحة.


مربع الاختيار

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


تحذير وحدة التحكم

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

 <label>    <input       type="checkbox"       name="isFriendly"       checked={this.state.isFriendly}       onChange={this.handleChange}   /> Is friendly? </label> 

في أسلوب handleChange() ، والذي يظهر handleChange() أدناه ، عند العمل مع الحقول النصية ، اكتشفنا اسم العنصر ( name ) ومحتوياته ( value ) ، وبعد ذلك قمنا بتحديث الحالة عن طريق الكتابة إليه بما اسم الحقل باسم معين في السمة value :

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

نحتاج الآن إلى معرفة كيفية التعامل مع علامة ليس لها سمة value . يحتوي فقط على السمة checked ، والتي لا يمكن أن تقبل سوى قيم true أو false . نتيجة لذلك ، من أجل استخدام الأسلوب handleChange() للعمل مع إشارة ، نحتاج إلى التحقق مما إذا كان العنصر الذي يسمى هذا المعالج هو علامة. من أجل إجراء هذا الفحص ، نذكر أن نوع ( type ) عنصر input يمثل العلامة قد تم تعيينه على checkbox . للتحقق من هذه القيمة ، يمكنك الرجوع إلى خاصية type عنصر event.target . سنقوم باستخراج هذه الخاصية من event.target ، وكذلك الخاصية checked ، باستخدام البناء التالي:

 const {name, value, type, checked} = event.target 

يمكننا الآن التحقق من قيمة ثابت type ومعرفة ما إذا كان العنصر الذي يسمى معالج الأحداث هو علامة. إذا كانت هذه هي الحالة ، فسنكتب إلى الحالة ما تبين أنه في checked الثابت. لا تنس حفظ الكود المسؤول عن العمل مع حقول النص. نتيجة لذلك ، يأخذ رمز handleChange() النموذج التالي:

 handleChange(event) {   const {name, value, type, checked} = event.target   type === "checkbox" ? this.setState({ [name]: checked }) : this.setState({ [name]: value }) } 

بعد ذلك ، تحقق من تشغيل العلم.


التحقق من تشغيل العلم

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

 <textarea   value={"Some default value"}   onChange={this.handleChange} /> 

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

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

 <label>   <input       type="radio"       name="gender"       value="male"       checked={this.state.isFriendly}       onChange={this.handleChange}   /> Male </label> <br /> <label>   <input       type="radio"       name="gender"       value="female"       checked={this.state.isFriendly}       onChange={this.handleChange}   /> Female </label> 

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

عند تكوين المحولات ، لا يمكنك ببساطة الإشارة إلى أن القيمة checked تم ضبطها ، على سبيل المثال ، إلى true إذا كانت بعض خصائص الحالة true . يجب أن تدعم المفاتيح المتزامنة ، داخل المجموعة ، التغيير في حالتها. بدلاً من ذلك ، يتم تعيين القيمة checked للمفاتيح حسب الحالة. في حالتنا ، سيتم تمثيل هذا الشرط من خلال مقارنة خاصية الحالة الخاصة بـ this.state.gender بالسلسلة من male أو female . في رمز وصف المحول ، يبدو كما يلي:

 <label>   <input       type="radio"       name="gender"       value="male"       checked={this.state.gender === "male"}       onChange={this.handleChange}   /> Male </label> <br /> <label>   <input       type="radio"       name="gender"       value="female"       checked={this.state.gender === "female"}       onChange={this.handleChange}   /> Female </label> 

أضف الآن خاصية جديدة ، أو gender ، إلى الولاية ، مع تهيئة سلسلة فارغة:

 this.state = {   firstName: "",   lastName: "",   isFriendly: false,   gender: "" } 

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

 <h2><font color="#3AC1EF">You are a {this.state.gender}</font></h2> 

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


التبديل على صفحة التطبيق

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

الآن دعونا نتحدث عن حقول القائمة.

في HTML العادي ، يتم استخدام البنيات التالية لوصف مربعات التحرير والسرد:

 <select>   <option></option>   <option></option>   <option></option> <select/> 

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

افترض أننا نريد إنشاء مربع تحرير وسرد يسمح للمستخدم بتحديد لونه المفضل. للقيام بذلك ، يمكنك وضع البنية التالية في سمة value عنصر select : value={this.state.favColor} . سيحصل هذا على القيم التي يحددها المستخدم. أضف الآن favColor إلى الولاية:

 this.state = {   firstName: "",   lastName: "",   isFriendly: false,   gender: "",   favColor: "blue" } 

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

إليك ما يشبه عنصر select توقيع select مع توقيع:

 <label>Favorite Color:</label> <select   value={this.state.favColor}   onChange={this.handleChange}   name="favColor" >   <option value="blue">Blue</option>   <option value="green">Green</option>   <option value="red">Red</option>   <option value="orange">Orange</option>   <option value="yellow">Yellow</option> </select> 

أضف الآن نقشًا آخر إلى النموذج الذي يعرض اللون المفضل للمستخدم:

 <h2><font color="#3AC1EF">Your favorite color is {this.state.favColor}</font></h2> 

حان الوقت لتجربة مربع التحرير والسرد.


مربع التحرير والسرد

كما ترون ، على الرغم من أن نموذجنا لا يتألق مع تطور التصميم ، تعمل عناصر التحكم الموضوعة عليه كما هو متوقع.

بفضل الطريقة التي يتم بها تنظيم عناصر التحكم React في React ، من السهل استخدام المعالج نفسه للتعامل مع الأحداث الخاصة به. هذا هو بالضبط مخطط العمل المستخدم في حالتنا. الميزة الوحيدة handleChange() لدينا هي أنه يتعين علينا التعامل مع أحداث العلم بطريقة خاصة.

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

 <button>Submit</button> 

في HTML5 ، إذا تم العثور على عنصر button في النموذج ، فسيتم مثل عنصر input قديم من النوع submit . إذا قمت بالنقر فوق هذا الزر ، فسيتم تشغيل حدث لنموذج onSubmit نفسه. إذا كنت بحاجة إلى القيام بشيء ما بعد إكمال النموذج ، فيمكنك إضافة onClick الأحداث onClick إلى الزر ، لكن على سبيل المثال ، أنا شخصياً أفضل التعامل مع هذه الأحداث على مستوى النموذج عن طريق تعيين معالج الأحداث onSubmit :

 <form onSubmit={this.handleSubmit}> 

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

النتائج

في هذا الدرس ، نختتم حديثنا عن العمل مع النماذج في React. في المرة القادمة ستجد عملًا عمليًا في هذا الموضوع.

أعزائي القراء! إذا حاولت استخدام مكتبة formik لإنشاء نماذج في React ، فيرجى إخبارنا بذلك.