رد فعل تعليمي ، الجزء 16: المرحلة الرابعة من العمل على تطبيق TODO ، معالجة الأحداث

في جزء اليوم من ترجمة البرنامج التعليمي React ، سنواصل العمل على تطبيق Todo ونتحدث عن كيفية تعامل 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: مشروع المقرر

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

→ الأصل

ob الوظيفة

في آخر مرة ، قمنا بتنزيل قائمة المهام للتطبيق من ملف JSON ، وبعد ذلك ، من خلال السير في الصفيف الناتج ، شكلنا ، باستخدام طريقة map() ، مجموعة من المكونات. نود تعديل هذه البيانات. ولا يمكننا القيام بذلك إلا إذا حملناها مسبقًا إلى حالة المكون.

تتمثل مهمة اليوم في تحويل مكون App إلى مكون حالة وتحميل بيانات الحالة المستوردة إلى حالة ذلك المكون.

olution الحل

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

 import React from "react" import TodoItem from "./TodoItem" import todosData from "./todosData" function App() {   const todoItems = todosData.map(item => <TodoItem key={item.id} item={item}/>)     return (       <div className="todo-list">           {todoItems}       </div>   ) } export default App 

حتى نتمكن من تعديل البيانات من قائمة todosData ، نحتاج إلى وضع ما يتم تخزينه الآن في todosData في حالة مكون App .

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

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

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

الدرس 30. التعامل مع الأحداث في رد الفعل

→ الأصل

التعامل مع الأحداث هو ما يدفع تطبيقات الويب وما يميزها عن المواقع الثابتة البسيطة. التعامل مع الأحداث في React بسيط للغاية ، وهو يشبه إلى حد كبير كيفية معالجة الأحداث في HTML عادي. لذلك ، على سبيل المثال ، في React يوجد معالجات أحداث onClick و onSubmit ، والتي تشبه آليات HTML المماثلة المقدمة في شكل onclick و onsubmit ، ليس فقط من حيث الأسماء (في React ، ومع ذلك ، يتم تشكيل أسمائهم باستخدام نمط الجمل) ، ولكن أيضًا في كيف بالضبط أنهم يعملون معهم.

سننظر هنا في الأمثلة ، مع تجربة تطبيق قياسي تم إنشاؤه باستخدام create-react-app ، الذي يحتوي ملف مكون App على الكود التالي:

 import React from "react" function App() {   return (       <div>           <img src="https://www.fillmurray.com/200/100"/>           <br />           <br />           <button>Click me</button>       </div>   ) } export default App 

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


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

قبل أن نتمكن من التحدث بجدية عن تعديل حالة المكونات باستخدام طريقة setState() ، نحتاج إلى التعامل مع الأحداث ومعالجة الأحداث في React. تسمح آليات معالجة الأحداث لمستخدم التطبيق بالتفاعل معه. يمكن أن يستجيب أحد التطبيقات ، على سبيل المثال ، click الأحداث أو hover ، وتنفيذ إجراءات معينة عند حدوث هذه الأحداث.

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

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

 <button onclick="myFunction()">Click me</button> 

في React ، كما ذُكر سابقًا ، يكون لمعالجات الأحداث أسماء مؤلفة وفقًا لقواعد نمط الإبل ، أي أن onclick سيتحول إلى onclick هنا. وينطبق الشيء نفسه على onMouseOver الأحداث onMouseOver ، ومعالجات أخرى. سبب هذا التغيير هو أنه يستخدم طريقة لتسمية الكيانات شائعة في JavaScript.

الآن ، دعونا نعمل مع الكود الخاص بنا ونجعل الزر يستجيب للنقرات عليه. بدلاً من تمرير الكود إلى المعالج لاستدعاء الوظيفة كسلسلة ، نقوم بتمرير اسم الدالة بين الأقواس. سيبدو الآن شراء الجزء المقابل من الكود لدينا:

 <button onClick={}>Click me</button> 

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

 <button onClick={() => console.log("I was clicked!")}>Click me</button> 

الآن عند النقر فوق الزر ، النص I was clicked! .

يمكن تحقيق نفس التأثير من خلال الإعلان عن وظيفة مستقلة وإحضار رمز ملف المكون إلى النموذج التالي:

 import React from "react" function handleClick() {   console.log("I was clicked") } function App() {   return (       <div>           <img src="https://www.fillmurray.com/200/100"/>           <br />           <br />           <button onClick={handleClick}>Click me</button>       </div>   ) } export default App 

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

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

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

 import React from "react" function handleClick() {   console.log("I was clicked") } function App() {   return (       <div>           <img onMouseOver={() => console.log("Hovered!")} src="https://www.fillmurray.com/200/100"/>           <br />           <br />           <button onClick={handleClick}>Click me</button>       </div>   ) } export default App 

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

كالعادة - نوصيك بأخذ بعض الوقت لتجربة ما تعلمته اليوم.

ملخص

لقد قمت اليوم ببعض الأعمال العملية التي أرست الأساس للتغييرات الرئيسية في تطبيق Todo وتعرّفت على آليات التعامل مع الأحداث في React. في المرة القادمة سوف يُعرض عليك ورشة عمل أخرى وسيتم تقديم موضوع جديد.

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