Како изводити ЦРУД операције помоћу Реацт-а

У мојим претходним чланцима већ смо написали исту Тодо апликацију користећи Ванилла ЈаваСцрипт и Ангулар. Сада је време да овај исти пример узмемо мало даље и употребимо још популарнији оквир: Реацт. Овај пример претпоставља да сте на свој систем већ инсталирали ноде и цреате-респонсе-апп .

Пре свега, креирајмо нову Реацт апликацију са овом командом.

create-react-app todo

Сачекајте неколико секунди, а затим бисте требали имати фасциклу тодо у систему датотека. ЦД у ту фасциклу.

Прва ствар која се креира је нова датотека која се зове Тодо.јс унутар директоријума срц / . Ево кода у тој датотеци:

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

This message is from Todo component

) } }
export default Todo;

Прво, увозимо Реацт и Цомпонент из Реацт-ајезгро.

Тада креирамо Тодо компоненту која се протеже од Цомпонент .

Тодо компонента има метод рендеровања који приказује ЈСКС са х1 елементом и текстом „Ова порука је од Тодо компоненте“.

Коначно, извозимо ову компоненту да бисмо је користили у остатку нашег пројекта.

Сада отворите датотеку срц / Апп.јс. Морамо да увозимо нашу новостворену компоненту Тодо након увоза датотеке Апп.цсс .

Кад једном стигнете, сада користите ову компоненту унутар методе рендеровања компоненте апликације.

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;

Сада када имамо основну датотеку Тодо компоненте и увели смо је у компоненту апликације и користили је, време је да додамо неке моцкДата . Овог пута ћемо користити државе Реацт за рад са нашим подацима. Ово олакшава рад ЦРУД операција и ажурирање приказа у складу с тим. Додајте овај код у компоненту Тодо:

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() }] }}
Стате је попут складишта података за компоненту РеацтЈС. То се углавном користи за ажурирање компоненту када корисник обавља неку акцију као clicking button, typing some text, pressing some key, итд

Горње стање се такође може поставити унутар конструктора. Изаберите који вам се метод свиђа.

Као што видите, стате у Реацт-у је једноставно јавасцрипт објекат са својствима као што су едит , ид и моцкДата . Едит имовина је боолеан. Користиће се за приказивање и скривање обрасца за уређивање за уређивање одређене ставке у моцкДата . ИД имовина се користи за подешавање ид тренутног ставке унутар моцкДата да изврши операцију ажурирања.

Сада када смо додали моцкДата у стање које се назива и почетно стање , време је да додамо ЈСКС. Ако желите да сазнате више о ЈСКС-у, идите овде за више детаља. То је синтаксно проширење за ЈаваСцрипт које производи Реацт елементе за приказивање података на страницама.

ЈСКС наводи све ставке у моцкДата-у, односно извршава операцију „Р“ ЦРУД-а. Да бисте то урадили, прикажите овај код класи.

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

Рендер метод је једноставан. Прво, има облик који се користи за додавање нове ставке на листу задатака. Овај образац има догађај онСубмит и позива метод онСубмитХандле који ћемо написати касније у овој компоненти.

Затим имамо ул и једноставно мапирамо све ставке унутар моцкДата и представимо наслов и додамо иста дугмад као у претходним примерима (Делете, Едит и Цомплете). Сада, ако покренете своју апликацију помоћу команде „нпм старт“, требало би да видите нешто слично.

Сада када је операција Р завршена, време је да додате операцију креирања која је Ц у ЦРУД-у. Додајте метод онСубмитХандле Тодо компоненти као доле.

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

ОнСубмитХандле метод се позива када се кликне на дугме Адд. Овде користимо метод сетСтате за Тодо-ово стање који је:

setState()заказује ажурирање stateобјекта компоненте . Када се стање промени, компонента одговара поновним приказивањем.

Овде је метода сетСтате позвана да ресетује стање Тодо компоненте која има моцкДата. Једноставно додаје нову ставку преузету из поља за унос. На крају, вредност поља за унос подесите на празно.

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

То је то. Као што видите, Реацтјс је још више усмерено на компоненте решење савремених ЈаваСцрипт апликација. Следећи задатак био би да поделите елемент обрасца на његове сопствене компоненте тако да не морамо да користимо два елемента обрасца за операције ажурирања и додавања. То би требао бити једноставан и забаван задатак за све.

Да бисте добили комплетан код, клонирајте доље спремиште.

зафар-салеем / реаговање-тодо

Допринесите развоју зафар-салеем / респонсе-тодо стварањем налога на ГитХуб-у. гитхуб.цом