Τρόπος εκτέλεσης λειτουργιών CRUD χρησιμοποιώντας το React

Στα προηγούμενα άρθρα μου, έχουμε ήδη γράψει την ίδια εφαρμογή Todo χρησιμοποιώντας Vanilla JavaScript και Angular. Τώρα ήρθε η ώρα να ακολουθήσουμε το ίδιο παράδειγμα λίγο περισσότερο και να χρησιμοποιήσουμε ένα ακόμη πιο δημοφιλές πλαίσιο: React. Αυτό το παράδειγμα προϋποθέτει ότι έχετε ήδη εγκαταστήσει κόμβο και δημιουργήστε-αντιδράστε-εφαρμογή στο σύστημά σας.

Πρώτα απ 'όλα, ας δημιουργήσουμε μια νέα εφαρμογή React με αυτήν την εντολή.

create-react-app todo

Δώστε του λίγα δευτερόλεπτα και στη συνέχεια θα πρέπει να έχετε έναν φάκελο todo στο σύστημα αρχείων σας. CD σε αυτόν τον φάκελο.

Το πρώτο πράγμα που δημιουργείται είναι ένα νέο αρχείο που ονομάζεται 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 που εκτείνεται από το Component .

Το στοιχείο todo έχει μια μέθοδο απόδοσης που καθιστά το JSX με ένα στοιχείο h1 και το κείμενο "Αυτό το μήνυμα προέρχεται από το στοιχείο Todo".

Τέλος, εξάγουμε αυτό το στοιχείο για να το χρησιμοποιήσουμε στο υπόλοιπο έργο μας.

Τώρα ανοίξτε το αρχείο 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, κ.λπ.

Η παραπάνω κατάσταση μπορεί επίσης να τοποθετηθεί μέσα στον κατασκευαστή. Επιλέξτε όποια μέθοδο θέλετε.

Όπως μπορείτε να δείτε, η κατάσταση στο React είναι απλώς ένα αντικείμενο javascript με ιδιότητες όπως επεξεργασία , id και mockData . Η ιδιότητα επεξεργασίας είναι δυαδική. Θα χρησιμοποιηθεί για την εμφάνιση και απόκρυψη της φόρμας επεξεργασίας για την επεξεργασία ενός συγκεκριμένου αντικειμένου στο mockData . Η ιδιότητα id χρησιμοποιείται για να ορίσει το id του τρέχοντος στοιχείου στο mockData για να εκτελέσει τη λειτουργία ενημέρωσης.

Τώρα που έχουμε προσθέσει το mockData στην κατάσταση που ονομάζεται επίσης αρχική κατάσταση , ήρθε η ώρα να προσθέσετε το JSX. Εάν θέλετε να μάθετε περισσότερα σχετικά με το JSX, μεταβείτε εδώ για περισσότερες λεπτομέρειες. Πρόκειται για μια επέκταση σύνταξης στο JavaScript που παράγει στοιχεία React για την απόδοση δεδομένων σε σελίδες.

Το JSX παραθέτει όλα τα στοιχεία στο mockData, δηλαδή εκτελεί τη λειτουργία "R" του CRUD. Για να το κάνετε αυτό, δώστε αυτόν τον κωδικό στην τάξη.

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

Η μέθοδος Render είναι απλή. Πρώτον, έχει τη φόρμα που χρησιμοποιείται για την προσθήκη ενός νέου αντικειμένου στη λίστα υποχρεώσεων. Αυτή η φόρμα έχει ένα συμβάν 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 Component που έχει mockData. Απλώς προσαρτά το νέο στοιχείο που έχει ληφθεί από το πεδίο εισαγωγής. Τέλος, ορίστε την τιμή του πεδίου εισαγωγής σε κενή.

Go ahead and refresh the app in your browser and type “Hike time” or anything you want and press the ADD button. You should be able to see the new item at the bottom of the list like above.

Now that the C is done, it’s time for D which is Delete. Simple add the onDeleteHandle method to the Todo component like below.

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

This method is triggered when the delete button is clicked. As you can see, we are binding this and item.id to onDeleteHandle. The this keyword is necessary so that we have access to the current scope to access the state of the Todo Component with the this keyword, whereas the id part is used to delete that particular item.

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 / react-todo

Συνεισφέρετε στην ανάπτυξη zafar-saleem / react-todo δημιουργώντας έναν λογαριασμό στο GitHub. github.com