Reacționează cursul de crash pentru începători, partea 4

onSubmit = (e) => this.addNewMovie (e)

Apoi, adăugați addNewMovie () la partea de sus a  clasa componente:

addNewMovie (e) e.preventDefault (); var film = titlu: această valoare titlu, anul: această an.valură, descriere: această descriere.value, poster: this.poster.value; console.log (film); 

Prima sarcină este să împiedicăm evenimentul implicit de trimitere de la tragere, cu care facem e.preventDefault (). În caz contrar, atunci când formularul este trimis, pagina web se va actualiza automat, ceea ce nu este ceea ce dorim.

Apoi, vom crea un obiect de film nou prin apucarea valorilor câmpului de intrare pentru formulare pe care le-am stocat convenabil ca proprietăți ale clasei componente mai devreme.

A console.log () comanda iese film obiect, astfel încât să putem testa că este creat corect după depunerea formularului.

Odată ce ați fost satisfăcut film obiect este generat corect, mergeți mai departe și ștergeți console.log () apel.

Pentru a afișa noul film în galeria noastră, trebuie să îl adăugăm la film obiect de stat. Odată ce acest lucru se va realiza, React va avea grijă de actualizarea DOM pentru noi.

Pentru a realiza acest lucru, creați o nouă metodă în App.js (unde trăiește obiectul de stare al aplicației) să se ocupe de adăugarea unui film la starea actuală.

addMovieToGallery (film) console.log ('mooooooovie', film); 

Nu uitați să legați noua metodă la acest astfel încât este disponibil în întreaga clasă.

this.addMovieToGallery = this.addMovieToGallery.bind (acest);

De altfel, s-ar putea să te întrebi de ce trebuie să facem acest lucru aici, dar nu și pentru addNewMovie () metoda pe care am adăugat-o la  mai sus. Acesta este un efect secundar al utilizării unei funcții de săgeată ES6, deoarece se leagă automat acest Pentru dumneavoastră. Acest truc mic merită să vă amintiți, deoarece reduce complexitatea codului, îmbunătățind în același timp lizibilitatea codului.

A folosi addMovieToGallery () în a noastră  componenta copil componentă, pur și simplu trecem o referință la ea prin intermediul recuzităților. În App.js, actualizați  sunați la:

Înapoi în AddMovie.js, actualizați addNewMovie () metoda de trecere a obiectului de film la addMovieToGallery () prin intermediul metodei addMovie pe care tocmai am creat-o.

addNewMovie (e) e.preventDefault (); var film = titlu: această valoare titlu, anul: această an.valură, descriere: această descriere.value, poster: this.poster.value; this.props.addMovie (film); 

Acum, când vom completa formularul, obținem obiectul filmului afișat în consola, ca și înainte, dar de această dată este prin intermediul addMovieToGallery () metodă în  component.

Ștergeți console.log () comandă în addMovieToGallery () și înlocuiți-l cu următorul cod pentru a adăuga detaliile filmului introduse la filme obiect de stat:

addMovieToGallery (film) var ts = Date.now (); var newMovie = ; newMovie ['film' + ts] = film; var currentMovies = ... this.state.movies; var newMovies = Object.assign (currentMovies, newMovie); this.setState (filme: newMovies); 

Acest lucru este destul de similar cu ceea ce am făcut în partea a treia pentru loadAdditionalMovies () metodă. Principala diferență este că o cheie unică trebuie generată, în zbor, pentru fiecare intrare video suplimentară. Acest lucru se realizează prin utilizarea ștampilei curente ca tastă unică și prin adăugarea acesteia film.

Acest lucru va duce la fiecare film suplimentar, adăugat prin intermediul formularului, având chei unice.

film1501686019706 film1501686027906 film1501686032929

… si asa mai departe.

Deschideți aplicația "Movie Mojo" din browser și adăugați două filme noi în galerie prin intermediul formularului. În plus, sunt adăugate imagini poster de film suplimentare ./ Public / postere / pentru confort, astfel încât să puteți testa cu ușurință adăugarea de filme la galerie. Puteți accesa acestea descărcând proiectul de aplicație finită.

De fiecare dată când trimiteți formularul, se adaugă un film suplimentar în galerie!

Instalarea filmului Mojo

Faceți clic pe link-ul din partea dreaptă (aproximativ la jumătatea paginii) pentru a descărca fișierul zip din proiectul "Movie Mojo" finalizat. Odată ce este extras, deschideți o fereastră de linie de comandă și navigați la film-Mojo director și introduceți:

npm install

Acest lucru va dura câteva minute pentru a descărca toate modulele "Node.js" necesare pentru a rula proiectul.

Apoi tastați:

npm start

Aceasta va compila aplicația React și o va deschide într-un browser prin intermediul unui server mini web dedicat.

Concluzie

Am acoperit destul de mult în seria tutorialului din patru părți, așa că felicitări dacă ați reușit să faceți totul și ați urmat împreună cu codul.

Acum ar trebui să vă simțiți confortabil cu elementele de bază ale React, iar acest lucru vă va oferi speranța de a continua și de a construi aplicații mai complicate.

Aș recomanda descărcarea proiectului "Movie Mojo" și examinarea codului sursă pentru a vă asigura că înțelegeți cum se potrivesc.

Există o mulțime de posibilități de a extinde aplicația, deci de ce să nu încercați să veniți cu unele noi caracteristici suplimentare? Aceasta este, de asemenea, o modalitate excelentă de cimentare a învățării prin încercarea de a implementa noi elemente React în aplicație.

Iată câteva idei pe care le puteți adăuga:

• Adăugați interfața și codul pentru a elimina filmele din galerie.
• Permite sortarea după titlu de film, anul, etc.
• Introduceți un sistem de rating.

Mi-ar plăcea să aud orice feedback despre acest tutorial prin comentariile de mai jos. Credeți că este ușor să urmați sau au existat părți cu care v-ați confruntat? Întotdeauna îmi doresc să-mi fac tutorialele mai bine, deci feedback-ul este întotdeauna foarte binevenit.

Codul Happy React!