Kaip atlikti CRUD operacijas naudojant React

Ankstesniuose mano straipsniuose mes jau parašėme tą pačią „Todo“ programą naudodami „Vanilla JavaScript“ ir „Angular“. Dabar atėjo laikas paimti tą patį pavyzdį šiek tiek toliau ir naudoti dar populiaresnį pagrindą: „React“. Šiame pavyzdyje daroma prielaida, kad jau įdiegėte mazgą ir „ create-reago-app “ savo sistemoje.

Pirmiausia sukurkime naują „React“ programą naudodami šią komandą.

create-react-app todo

Duokite jam kelias sekundes, tada failų sistemoje turėtumėte turėti Todo aplanką. Kompaktinį diską į tą aplanką.

Pirmas dalykas, kad yra sukurta nauja byla vadinama Todo.js viduje src / aplanką. Čia yra failo kodas:

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

This message is from Todo component

) } }
export default Todo;

Pirma, mes importuojame „ React“ ir „ Component“ iš „React“šerdis.

Tada mes kuriame „ Todo“ komponentą, kuris tęsiasi nuo komponento .

Todo komponentas turi pateikimo metodą, kuris atvaizduoja JSX su h1 elementu ir tekstu „Šis pranešimas yra iš Todo komponento“.

Galiausiai mes eksportuojame šį komponentą, kad jį panaudotume likusiame projekte.

Dabar atidarykite src / App.js failą. Importavę naujai sukurtą „Todo“ komponentą turime importuoti failą „ App.css“ .

Kai būsite ten, dabar naudokite šį komponentą „App“ komponento pateikimo metode.

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;

Dabar, kai turime pagrindinį „Todo Component“ failą ir jį importavome į „App“ komponentą ir jį naudojome, laikas pridėti šiek tiek „ mockData“ . Šį kartą mes naudosime „ React“ būsenas darbui su savo duomenimis. Tai palengvina veiksmus atliekant CRUD operacijas ir atitinkamai atnaujinant rodinį. Pridėkite šį kodą prie „Todo“ komponento:

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() }] }}
„State“ yra tarsi „ReactJS“ komponento duomenų saugykla. Tai dažniausiai naudojamas atnaujinti komponentą, kai vartotojas atlieka tam tikrą panašaus veiksmų clicking button, typing some text, pressing some key, ir tt

Aukščiau nurodytą būseną taip pat galima pastatyti konstruktoriaus viduje. Pasirinkite bet kurį jums patinkantį metodą.

Kaip matote, „React“ būsena yra tiesiog „javascript“ objektas, turintis tokias savybes kaip „ edit“ , „ id“ ir „ mockData“ . Redaguoti nuosavybė yra Būlio. Jis bus naudojamas redagavimo formai parodyti ir paslėpti, norint redaguoti tam tikrą elementą „ mockData“ . Tapatybės turtas naudojamas nustatyti dabartinio elemento viduje mockData ID atlikti atnaujinimo operaciją.

Dabar, kai „mockData“ yra pridėta prie būsenos, kuri taip pat vadinama pradine būsena , laikas pridėti JSX. Jei norite sužinoti daugiau apie JSX, apsilankykite čia, jei norite gauti daugiau informacijos. Tai yra „JavaScript“ sintaksės plėtinys, kuris gamina „React“ elementus duomenims pateikti puslapiuose.

JSX pateikia visus „mockData“ elementus, ty atlieka CRUD operaciją „R“. Norėdami tai padaryti, pateikite šį kodą klasei.

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

Render“ metodas yra paprastas. Pirma, ji turi formą, kuri naudojama norint pridėti naują elementą į Todo sąrašą. Šioje formoje yra „ onSubmit“ įvykis ir ji vadina „ onSubmitHandle“ metodą, kurį vėliau parašysime šiame komponente.

Tada mes turime ul ir paprasčiausiai susikurkite visus elementus, esančius „mockData“, ir pateikite pavadinimą bei pridėkite tuos pačius mygtukus, kaip ir ankstesniuose pavyzdžiuose („Delete“, „Edit“ ir „Complete“). Dabar, jei paleidžiate programą naudodami komandą „npm start“, turėtumėte pamatyti kažką panašaus.

Dabar, kai R operacija baigta, laikas pridėti kūrimo operaciją, kuri yra CR CRUD. Įtraukite onSubmitHandle metodą į „Todo“ komponentą, kaip nurodyta toliau.

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 = '';}

Spustelėjus mygtuką Pridėti, iškviečiamas „ onSubmitHandle“ metodas. Todo būsenoje mes naudojame setState metodą, kuris yra:

setState()suplanuoja komponento stateobjekto atnaujinimą. Pasikeitus būsenai, komponentas reaguoja perteikdamas.

Čia „setState“ metodas naudojamas atstatyti „Todo“ komponento, kuriame yra „mockData“, būseną. Jis tiesiog prideda naują elementą, paimtą iš įvesties lauko. Galiausiai nustatykite tuščią įvesties lauko vertę.

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;}

Viskas. Kaip matote, „Reactjs“ yra dar labiau į komponentus orientuotas šiuolaikinių „JavaScript“ programų sprendimas. Kita jūsų užduotis būtų formos elemento padalijimas į savo komponentus, kad mums nereikėtų naudoti dviejų formos elementų atnaujinant ir pridėdami operacijas. Tai turėtų būti paprasta ir įdomi užduotis visiems.

Norėdami gauti visą kodą, klonuokite žemiau esančią saugyklą.

zafar-saleem / reaguoti-todo

Prisijunkite prie „zafar-saleem“ / „reage-todo“ kūrimo sukurdami „GitHub“ paskyrą. github.com