كيفية إجراء عمليات CRUD باستخدام React

في مقالاتي السابقة ، كتبنا بالفعل نفس تطبيق Todo باستخدام Vanilla JavaScript و Angular. حان الوقت الآن لأخذ هذا المثال نفسه قليلاً واستخدام إطار عمل أكثر شيوعًا: React. يفترض هذا المثال أن قمت بتثبيت بالفعل عقدة و إنشاء تتفاعل التطبيق على النظام الخاص بك.

بادئ ذي بدء ، لنقم بإنشاء تطبيق React جديد باستخدام هذا الأمر.

create-react-app todo

امنحه بضع ثوانٍ ثم يجب أن يكون لديك مجلد todo في نظام الملفات الخاص بك. القرص المضغوط في هذا المجلد.

أول شيء يتم إنشاؤه هو ملف جديد يسمى Todo.js داخل المجلد / src . هذا هو الكود في هذا الملف:

import React, { Component } from 'react';
class Todo extends Component { render() { return(

This message is from Todo component

) } }
export default Todo;

أولاً ، نحن نستورد React و Component من Reactالنواة.

ثم نقوم بإنشاء مكون Todo الذي يمتد من المكون .

عنصر ما يجب عمله لديه تجعل الطريقة التي يجعل JSX مع H1 عنصر والنص "هذه الرسالة هي من عنصر تودو".

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

افتح الآن ملف src / App.js. نحتاج إلى استيراد مكون Todo الذي تم إنشاؤه حديثًا بعد استيراد ملف App.css .

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

import React, { Component } from 'react';import logo from './logo.svg';import './App.css';
// import Todo component hereimport Todo from './Todo';
class App extends Component {
constructor(props) { super(props);
this.state = { show: false }; }
render() { // use Todo component inside render method. return ( ); }}
export default App;

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

class Todo extends Component { state = { edit: false, id: null, mockData: [{ id: '1', title: 'Buy Milk', done: false, date: new Date() }, { id: '2', title: 'Meeting with Ali', done: false, date: new Date() }, { id: '3', title: 'Tea break', done: false, date: new Date() }, { id: '4', title: 'Go for a run.', done: false, date: new Date() }] }}
الحالة مثل مخزن البيانات لمكون ReactJS. انها تستخدم في الغالب لتحديث المكون عند قيام المستخدم بعض الإجراءات مثل clicking button، typing some text، pressing some key، الخ

يمكن أيضًا وضع الحالة أعلاه داخل المُنشئ. اختر الطريقة التي تريدها.

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

الآن بعد أن تمت إضافة بيانات mockData إلى الحالة التي تسمى أيضًا الحالة الأولية ، فقد حان الوقت لإضافة JSX. إذا كنت ترغب في معرفة المزيد عن JSX ، فتوجه هنا لمزيد من التفاصيل. إنه امتداد لغوي لجافا سكريبت ينتج عناصر React لعرض البيانات على الصفحات.

يسرد JSX جميع العناصر في mockData ، أي أنه يؤدي عملية "R" الخاصة بـ CRUD. للقيام بذلك ، اعرض هذا الرمز على الفصل.

render() { return ( Add  
    
    {this.state.mockData.map(item => (
  • {item.title} Delete Edit Complete
  • ))}
);}

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

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

الآن بعد اكتمال عملية R ، حان الوقت لإضافة عملية إنشاء وهي C في CRUD. أضف طريقة onSubmitHandle إلى مكون Todo كما هو موضح أدناه.

onSubmitHandle(event) { event.preventDefault();
 this.setState({ mockData: [...this.state.mockData, { id: Date.now(), title: event.target.item.value, done: false, date: new Date() }] });
 event.target.item.value = '';}

و onSubmitHandle يتم استدعاء أسلوب عند النقر فوق الزر إضافة. هنا نستخدم طريقة setState في حالة Todo وهي:

setState()يقوم بجدولة تحديث stateلكائن المكون . عندما تتغير الحالة ، يستجيب المكون من خلال إعادة التصيير.

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

انطلق وقم بتحديث التطبيق في متصفحك واكتب "Hike time" أو أي شيء تريده واضغط على زر ADD. يجب أن تكون قادرًا على رؤية العنصر الجديد في أسفل القائمة كما هو موضح أعلاه.

الآن بعد أن تم الانتهاء من C ، حان وقت D وهو Delete. قم ببساطة بإضافة طريقة onDeleteHandle إلى مكون Todo كما هو موضح أدناه.

onDeleteHandle() { let id = arguments[0];
 this.setState({ mockData: this.state.mockData.filter(item => { if (item.id !== id) { return item; } }) });}

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

In order to access the item.id, we are going to use the arguments[0] object. Once we have the id, then set the state and filter through mockData. Find the item that needs to be deleted and return all the items except the one that needs to be deleted.

Go ahead and refresh your browser and press delete on the first item and you should see that it is deleted, like in the below screenshot.

That’s all for the delete part. The Update part, as usual, consists of 2 parts. First, show the edit form when the edit button is pressed, then perform the update operation.

To show and hide the edit form, we are going to use the edit property we added to state. So add the below renderEditForm method to the component.

renderEditForm() { if (this.state.edit) { return   Update  } }

It checks the edit state, and based on that it returns editForm which is the JSX syntax of the form.

Now call the above method in the render method inside the return keyword just above the current form, like below:

{this.renderEditForm()}

Now that this part is out of our way, it’s time to manipulate the edit property. Add the below onEditHandle method to the Todo Component:

onEditHandle(event) { this.setState({ edit: true, id: arguments[0], title: arguments[1] });}

This method is triggered when the Edit button is pressed. We are binding three parameters: this, id, and title. The this keyword is used to reference the current component. It sets the id property to the id of the current item being edited. It sets edit to true and adds a title property to the state, which we will access later in this component.

Now that we have this code in our component, go to the browser, refresh, and click on the edit button for the first item which will show the edit form like below:

This form has an input field and an update button. Now it’s time to handle the U part of CRUD. When the UPDATE button, in the edit form shown above, is pressed, the below method will be triggered:

onUpdateHandle(event) { event.preventDefault();
 this.setState({ mockData: this.state.mockData.map(item => { if (item.id === this.state.id) { item['title'] = event.target.updatedItem.value; return item; }
 return item; }) });
 this.setState({ edit: false });}

Add the above method to your Todo Component. This sets the state of the component, maps through mockData inside the state, and finds the item that needs to be updated and set its title with the new title. Finally, set the edit property of the state to false to hide the form. That is it.

Now run your code in your browser and try to update the first item. You should be able to see the updated title.

The final method is used to set the item to a completed state. Add the below method which does exactly that.

onCompleteHandle() { let id = arguments[0];
 this.setState({ mockData: this.state.mockData.map(item => { if (item.id === id) { item['done'] = true; return item; }
 return item; }) });}

The above method sets he property of the item in mockData to true. This is pretty much the same as in our previous two examples in Vanilla JavaScript and Angular.

Now to make this work, add the below code to “li” to set its class based on the “done” property state in mockData.

className={ item.done ? 'done' : 'hidden' }

Now refresh your browser and press the complete button. You should be able to see the below changes.

Below is the basic CSS that needs to be added to index.css file on order to display done items on the screen.

.done { text-decoration: line-through;}

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

للحصول على الرمز الكامل ، يرجى استنساخ المستودع أدناه.

ظفر سليم / رد-تود

ساهم في تطوير zafar-saleem / response-todo بإنشاء حساب على جيثب. github.com