Share
Sunteți gata să vă testați cunoștințele despre React? În acest videoclip de la cursul meu pe Modern Web Apps Cu React și Redux, vei fi provocat să construiești o aplicație de bază pentru lista de sarcini în React. În mod specific, va trebui să transmiteți datele unei componente copil în care va fi actualizată și trimisă înapoi la componenta părinte.
Dacă nu sunteți sigur cum să faceți acest lucru, nu vă faceți griji - puteți săriți spre soluție. Vă duc tot parcursul întregului proces, pentru a vă arăta cum sa făcut!
În această provocare, veți crea o aplicație de bază de sarcini în React.
Avem două componente deja construite: a TodoList component și a TodoItem component.
TodoList componentă are doar o listă de to-dos în starea sa, și fiecare are un a text proprietate și a Terminat proprietate. Apoi, putem face lista noastră de elemente de rezolvat în TodoItem component.
Apoi în TodoItem componenta, facem doar un element de listă cu o casetă de intrare care are valoarea. Dacă acest element de rezolvat este făcut, atunci valoarea nu poate fi editată - este doar pentru citire. Apoi avem un buton pe care îl putem folosi pentru a "finaliza" sau "a nefinaliza" o sarcină.
Chiar acum, se face bine în partea dreaptă, dar nu putem schimba aceste lucruri în starea noastră TodoList componentă. Deci, dacă încerc să fac modificări în aceste elemente de intrare, nu se întâmplă nimic. Dacă fac clic finalizarea, textul de pe buton nu se modifică așa cum ar trebui. Și încă pot selecta textul în câmpurile de intrare și, dacă aș putea face modificări, ar fi editable
Toate acestea trebuie să fie conectate corect. Și asta e provocarea ta! Iată codul CodePen cu tot codul sursă pentru care să lucrați.
Introduceți stiloul și încercați să vă dați seama de soluția proprie! Sau citiți mai departe și vă voi trece prin el mai jos.
Începeți prin a rupe codul original și dați-i un nume diferit, de ex. adăugând "SOLUȚIA MEA".
Avem câteva lucruri diferite pe care trebuie să le facem aici. În primul rând, în interiorul nostru TodoItem trebuie să putem modifica aceste date. Asta înseamnă că trebuie să avem onClick handler pentru buton și cu privire la schimbările handler pentru elementul de intrare.
Dar atunci avem nevoie de o modalitate de a trece aceste schimbări înapoi la părinte TodoList componentă. Asta înseamnă asta TodoList trebuie să treacă o funcție până la TodoItem, astfel încât să poată numi această funcție.
Deci, vom începe prin adăugarea unui updateTodo funcția în TodoList cu un text fals pentru moment, pe care îl vom actualiza mai târziu. Și acum că am creat updateTodo, îl putem folosi în interior TodoItem.
Deci, cum ar putea funcționa asta? Să începem cu butonul. Vom adăuga un onClick handler, și vom adăuga this.handleClick.
Deci, acum trebuie să ne scriem handleClick funcţie. handleClick funcția va face o schimbare la a face proprietate care a fost transferată la TodoItem.
Când se face clic pe acesta, dorim să inversăm orice valoare a lui Terminat este. Deci, dacă este fals, treceți-l la adevărat, și dacă este adevărat, treceți-l la fals. Și apoi, bineînțeles, vrem să trecem acel nou actualizat a face obiecte înapoi prin updateTodo funcţie.
Putem ajunge pe noi newTodo facand Object.assign, astfel încât să nu mutăm datele. Și vom copia toate proprietățile din actualul nostru serviciu, care este de fapt this.props.todo.
Dar apoi vrem să ne asigurăm că vom suprascrie Terminat proprietate, care ar trebui să fie invers sau negativ this.props.todo.done.
Deci asta e al nostru newTodo. Și apoi putem face this.props.updateTodo, și o vom transmite nouă newTodo.
OK, ca să manipulezi clicul. Acum să mergem să ne scrieți updateTodo acum, astfel încât să vedem de fapt acest lucru în acțiune. Chiar acum, dacă fac clic finalizarea, puteți vedea că noul nostru obiect de rezolvat este imprimat în cazul în care gata este setat la adevărat, dar nu vedem ce se reflectă în UI încă. Asta pentru că acum trebuie să salvăm acest lucru nou a face înapoi în nostru Todos stat.
Deci, să mergem mai departe și să scriem un updateTodo funcția și va lua asta newTodo ca parametru. Și înăuntru, o să facem this.setState.
Acum, voi stabili statul într-un mod pe care probabil că nu l-ați mai văzut până acum. Vom trece o funcție pentru a seta statul în loc să treacă un obiect. Aceasta este de fapt considerată o practică bună în React și poate fi singura modalitate de a stabili statul în viitor. Funcția la care treci setState va primi starea curentă ca parametru. Deci, putem primi acea stare ca parametru pentru această funcție și apoi ne întoarcem noua noastră stare de la această funcție.
Aceasta este de fapt o modalitate mai sigură de a crea un nou stat care se bazează pe vechiul stat. Aproape că te gândești la asta ca la un fel de funcție de reducere, în cadrul nostru setState apel.
Așa că vom merge mai departe și vom întoarce un nou obiect aici. Și din moment ce asta o să facem de la această funcție, putem de fapt să înfășurăm bretelele în paranteze astfel încât să știe că acesta este un obiect și nu un bloc de funcții.
Hai să ne punem existența state.todos, și vom trece peste fiecare a face acolo, și dacă todo.id este egal cu newTodo.id, atunci știm că acesta este a face obiect pe care trebuie să-l înlocuim. Așa că o putem înlocui cu newTodo, și altfel putem să ne întoarcem doar vechiul a face, pentru că nu este cea pe care căutăm să o înlocuim.
Și apoi trebuie să ne schimbăm updateTodo funcția la care se face referire this.updateTodo.
Acum, dacă faceți clic pe finalizarea, veți vedea că butonul se schimbă nefinisat, și asta pentru că todo.done este acum adevărat în loc de fals. De asemenea, textul "pardoseală de spălat" este acum puțin gri și nu mai poate fi editabil. Dacă fac clic nefinisat, se comută înapoi la Finalizare, iar caseta de text se poate modifica din nou.
Următorul nostru pas este de a face textul editabil prin adăugarea unui text cu privire la schimbările manipulant.
Pe intrare line, vom adăuga onChange = this.handleChange. Și apoi trebuie să scriem handleChange.
Vom începe prin crearea unui newTodo și copierea tuturor proprietăților din this.props.todo, și apoi handleChange va trece obiectul nostru de eveniment. Vom seta text a fi e.target.value. Și apoi, sub asta vom face this.props.updateTodo, și o vom trece newTodo.
Deci, acum, dacă schimbăm textul, funcționează bine. Acum putem spune că cumpărați ouă în loc de lapte și putem spune să spălăm mașina în loc de podea. Deci, acum facem cu succes modificări la un obiect dintr-o componentă copil și trecem aceste modificări înapoi la componenta părinte, unde pot fi stocate.
Deci, acum funcționează așa cum am vrut, dar mai am încă un lucru pe care vreau să-l fac. Veți observa că handleChange și funcția handleClick funcția are o mulțime de cod similar. Am avut deseori componente copii de genul asta, unde vrem să actualizăm un obiect într-un fel și apoi să-l dăm înapoi unui părinte, și veți găsi că un model comun pentru a face asta este Object.assign în acest fel.
Deci, ceea ce vom face pentru a face ordine lucrurile este de a crea o nouă funcție numită sendDelta. În acest caz, delta este doar termenul pentru orice trebuie să se schimbe între acest lucru și noul serviciu de care avem nevoie. Deci, ce putem face aici este trecerea noastră deltă, sau obiectul nostru doar pentru proprietățile care trebuie să se schimbe sendDelta.
Atunci vom copia codul handleClick și lipiți-l sendDelta. deltă este, în principiu, ultimul argument pe care am trecut-o Object.assign, astfel încât să putem continua și să înlocuim codul evidențiat mai jos cu deltă, și apoi trimiteți doar asta.
Deci acum handleClick și handleChange, putem înlocui pur și simplu cea mai mare parte a codului cu this.sendDelta, așa cum se arată mai jos. După cum puteți vedea, este mult mai concis.
Deci asta este soluția! Pentru codul sursă complet, vă puteți referi la soluția CodePen prezentată mai jos:
Bineînțeles, este posibil să fi venit o soluție diferită. Dacă da, este grozav. În orice caz, acum am creat cu succes o componentă copil care își poate schimba datele și apoi poate trimite aceste modificări înapoi pentru stocarea în componenta părinte.
În cursul complet, Modern Web Apps Cu React și Redux, veți învăța cum să utilizați React și Redux pentru a construi o aplicație web completă. Veți începe cu cea mai simplă arhitectură posibilă și veți construi încet aplicația, caracteristică după caracteristică. Până la urmă, ați creat o aplicație completă de cărți flash pentru învățarea prin repetări distanțate și veți fi învățat, de asemenea, multe despre React și Redux, precum și despre îmbunătățirea abilităților ES6 (ECMAScript 2015).
Puteți lua acest curs imediat cu un abonament la Envato Elements. Pentru o singură taxă lunară redusă, veți avea acces nu numai la acest curs, ci și la biblioteca noastră în creștere de peste 1.000 de cursuri video și cărți electronice de vârf din industria Envato Tuts+.
În plus, acum obțineți descărcări nelimitate de la imensa bibliotecă Envato Elements de 460.000 de bunuri creative. Creează cu fonturi, fotografii, grafică și șabloane unice și oferă proiecte mai bune mai rapid.
Accentsconagua