رد فعل البرنامج التعليمي الجزء 18: المرحلة السادسة من العمل على تطبيق TODO

في جزء اليوم من ترجمة البرنامج التعليمي React ، تتم دعوتك لمواصلة العمل على تطبيق Todo والتأكد من أن النقر فوق الأعلام يؤثر على حالة المكون.



→ الجزء 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: مشروع المقرر

الدرس 33. ورشة العمل. تطبيق TODO. المرحلة رقم 6

→ الأصل

ob الوظيفة

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

1. قم بإنشاء معالج أحداث في مكون App الذي يستجيب إلى الإبلاغ عن التغييرات (نحن نتحدث عن الحدث onChange ) ويغير حالة التطبيق وفقًا لذلك. ربما هذا هو الجزء الأكثر صعوبة من مهمة اليوم. من أجل التعامل معها - انتبه إلى التعليقات والفراغات الواردة في الكود.
2. تمرير الأسلوب المناسب إلى المكون TodoItem .
3. في مكون TodoItem بإنشاء آلية ، عند onChange الحدث onChange ، تقوم باستدعاء الطريقة التي تم تمريرها إلى مثيل المكون وتمريرها إلى معرف الحالة ( id ) ، الذي يتوافق مع العلامة التي نقر عليها المستخدم.

فيما يلي رمز مكون App :

 import React from "react" import TodoItem from "./TodoItem" import todosData from "./todosData" class App extends React.Component {   constructor() {       super()       this.state = {           todos: todosData       }       this.handleChange = this.handleChange.bind(this)   }     handleChange(id) {       //   ,      id        // completed   c false  true ( ).       //   ,       .       //       ,  .       // (  ,       map.)   }     render() {       const todoItems = this.state.todos.map(item => <TodoItem key={item.id} item={item}/>)             return (           <div className="todo-list">               {todoItems}           </div>       )   } } export default App 

olution الحل

للبدء ، قم بإنشاء آلية بسيطة للتحقق من استدعاء الأسلوب handleChange() . وهي نأتي به إلى هذا النموذج:

 handleChange(id) {   console.log("Changed", id) } 

الآن نقوم بتنفيذ ما يجب القيام به وفقًا للفقرتين 2 و 3 من المهمة. بمعنى ، handleChange() اتصالًا بين النقر فوق العلامة واستدعاء أسلوب handleChange() مع تمرير id هذه العلامة إليها.

لتمرير مرجع إلى handleChange() إلى مثيل مكون TodoItem ، يمكننا أن نفعل الشيء نفسه مثل تمرير الخصائص إليه وإعادة كتابة التعليمات البرمجية لإنشاء قائمة المكونات مثل هذا:

 const todoItems = this.state.todos.map(item => <TodoItem key={item.id} item={item} handleChange={this.handleChange}/>) 

لاحظ أن خاصية handleChange ، التي ستكون متاحة لمكونات TodoItem ، تحتوي على إشارة إلى طريقة handleChange لمثيل مكون App . في مكون TodoItem ، يمكن الوصول إلى هذه الطريقة بنفس الطريقة التي يتم بها نقل الخصائص الأخرى إليها. في هذه المرحلة ، يبدو رمز TodoItem كما يلي:

 import React from "react" function TodoItem(props) {   return (       <div className="todo-item">           <input               type="checkbox"               checked={props.item.completed}               onChange={() => console.log("Changed!")}           />           <p>{props.item.text}</p>       </div>   ) } export default TodoItem 

لاستدعاء أسلوب handleChange في رمز المكون ، يمكنك استخدام بنية النموذج props.handleChange() . في هذه الحالة ، تحتاج هذه الطريقة إلى تمرير id العنصر. يقبل onChange الأحداث onChange كائن حدث. لا نحتاج إلى هذا الكائن لاستدعاء أسلوب handleChange() . نعيد كتابة التعليمات البرمجية التي onChange معالج أحداث onChange للعنصر ، كما يلي:

 onChange={(event) => props.handleChange(props.item.id)} 

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

 onChange={() => props.handleChange(props.item.id)} 

حاول الآن تشغيل التطبيق ، وفتح وحدة التحكم ، انقر فوق خانات الاختيار.


اختبار أسلوب handleChange ()

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

بادئ ذي بدء ، نحتاج إلى حل المشكلة المتعلقة بالحالة التي يتم فيها تخزين مجموعة في حالة ، يجب أن يخضع عنصر منها ، استجابة للنقرة على إحدى العلامات ، لتغييرات ، لكن لا ينبغي لنا تعديل الصفيف المخزن في الإصدار القديم من الحالة. هذا ، على سبيل المثال ، لا يمكنك السير عبر مجموعة من الكائنات الموجودة بالفعل في إحدى الحالات ، والعثور على العنصر الضروري وتغيير الخاصية completed . نحتاج إلى أنه بعد تغيير الحالة ، سيتم تشكيل مجموعة جديدة ، سيتم تغيير أحد عناصرها ، وسيظل الباقي كما كان من قبل. أحد الأساليب لتشكيل مثل هذا الصفيف هو استخدام طريقة الصفيف map() ، المذكورة في التعليقات على المهمة. سنقوم بكتابة الكود في طريقة setState() . دعنا handleChange() رمز طريقة handleChange() من مكون App إلى النموذج التالي:

 handleChange(id) {   this.setState(prevState => {         }) } 

الآن ، باستخدام طريقة map() ، prevState.todos صفيف prevState.todos ونبحث عن العنصر الذي نحتاجه فيه ، أي الذي تم تمرير handleChange() أسلوب handleChange() ، ثم نغير خصائصه completed . تُرجع طريقة map() صفيفًا جديدًا ، سيتم استخدامه في الحالة الجديدة للتطبيق ، لذلك سنكتب هذه المصفوفة إلى ثابت. إليك ما يبدو عليه:

 handleChange(id) {   this.setState(prevState => {       const updatedTodos = prevState.todos.map(todo => {           if (todo.id === id) {               todo.completed = !todo.completed           }           return todo       })       return {           todos: updatedTodos       }   }) } 

هنا ، أثناء معالجة الصفيف باستخدام map() ، إذا تم handleChange() عنصر له id يساوي id تم تمريره إلى أسلوب handleChange() ، يتم عكس قيمة الخاصية completed لهذا العنصر ( true إلى false والعكس صحيح). بعد ذلك ، بغض النظر عما إذا كان العنصر قد تم تغييره ، تقوم map() بإرجاع هذا العنصر. يقع في صفيف جديد (يمثله ثابت updatedTodos ) ضمن نفس الفهرس الذي كان العنصر المقابل في صفيف todos من الإصدار السابق للحالة. بعد فحص المصفوفة بأكملها updatedTodos مصفوفة updatedTodos بالكامل ، يتم استخدام هذه المصفوفة كقيمة لخاصية todos للكائن الذي تم إرجاعه بواسطة طريقة setState() ، والتي تعد إصدارًا جديدًا من الحالة.

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

ملخص

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

أعزائي القراء! هل تعاملت مع عمل اليوم العملي؟