React Crash Course for Beginners, del 4

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

Deretter legger du til addNewMovie () metode til toppen av  komponent klasse:

addNewMovie (e) e.preventDefault (); var movie = title: this.title.value, year: this.year.value, description: this.description.value, poster: this.poster.value; console.log (film); 

Den første oppgaven er å forhindre at standardinnleveringshendelsen avfyres, som vi gjør med e.preventDefault (). Ellers, når skjemaet er sendt, oppdateres nettsiden automatisk, noe som ikke er det vi ønsker.

Deretter oppretter vi et nytt filmobjekt ved å ta tak i formverdier for innmatingsfelt som vi tidligere lagret som komponentklasseegenskaper.

EN console.log () kommandoen utdataer film objekt slik at vi kan teste det blir opprettet riktig når du sender inn skjema.

Når du er fornøyd film objektet blir riktig generert, gå videre og slett console.log () anrop.

For å vise den nye filmen i vårt galleri, må vi legge den til i film statobjekt. Når dette er gjort, vil React ta vare på å oppdatere DOM for oss.

For å oppnå dette, opprett en ny metode i App.js (der app-tilstandsobjektet lever) for å håndtere å legge til en film i den nåværende tilstanden.

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

Ikke glem å binde den nye metoden til dette så det er tilgjengelig i hele klassen.

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

Forresten kan du lure på hvorfor vi trengte å gjøre dette her, men ikke for addNewMovie () metode vi lagt til i  komponent over. Dette er en bivirkning ved å bruke en ES6-pil-funksjon, da den automatisk binder dette for deg. Dette lille trikset er vel verdt å huske som det reduserer kodekompleksiteten, samtidig som du forbedrer kodens lesbarhet.

Å bruke addMovieToGallery () i vår  barn komponent kode, vi bare sende ned en referanse til det via rekvisitter. I App.js, oppdater  ring for å være:

Tilbake i AddMovie.js, oppdater addNewMovie () Metode for å sende filmobjektet til addMovieToGallery () metode via addMovie prop vi nettopp opprettet.

addNewMovie (e) e.preventDefault (); var movie = title: this.title.value, year: this.year.value, description: this.description.value, poster: this.poster.value; this.props.addMovie (film); 

Nå, når vi fyller ut skjemaet, får vi filmen objektet utgitt til konsollen, som før, men denne gangen er det via addMovieToGallery () metode i  komponent.

Slett console.log () kommando i addMovieToGallery () og erstatt den med den følgende koden for å legge til de oppgitte filmen detaljene til filmer statlig objekt:

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

Dette er ganske lik det vi gjorde i del tre for loadAdditionalMovies () metode. Hovedforskjellen er at en unik nøkkel må genereres, i fly, for hver ekstra filmoppføring. Dette oppnås ved å bruke dagens tidsstempel som den unike nøkkelen og legge til den film.

Dette vil resultere i hver ekstra film, lagt til via skjemaet, med unike nøkler.

movie1501686019706 movie1501686027906 movie1501686032929

… og så videre.

Åpne filmen "Movie Mojo" i nettleseren og legg til to nye filmer i galleriet via skjemaet. Det er lagt ekstra filmplakatbilder til ./ Offentlig / plakater / mappe for enkelhets skyld, så du kan enkelt teste å legge til filmer i galleriet. Du kan få tilgang til disse ved å laste ned det ferdige app-prosjektet.

Hver gang du sender inn skjemaet, legges en ekstra film til galleriet!

Installere Movie Mojo

Klikk på linken til høyre (omtrent halvveis nedover siden) for å laste ned den ferdige filmprofilen "Movie Mojo". Når det er hentet, åpner du et kommandolinjevindu og navigerer til film-mojo katalog og skriv inn:

npm installasjon

Dette tar noen minutter å laste ned alle modulene "Node.js" som trengs for å kjøre prosjektet.

Skriv deretter inn:

npm start

Dette vil kompilere React-appen og åpne den i en nettleser via en dedikert mini-webserver.

Konklusjon

Vi har dekket ganske mye i denne firedelte opplæringsserien, så gratulerer hvis du har gjort det hele veien gjennom og fulgte med koden.

Du bør nå føle deg komfortabel med grunnlaget for React, og dette vil forhåpentligvis gi deg selvtilliten til å fortsette og bygge mer kompliserte apper.

Jeg vil anbefale å laste ned 'Movie Mojo' -prosjektet og undersøke kildekoden for å sikre at du forstår hvordan alt passer sammen.

Det er mange muligheter for å utvide appen, så hvorfor ikke prøve å komme opp med noen nye ekstrafunksjoner? Dette er også en fin måte å sementere din læring ved, ved å forsøke å implementere nye React-elementer til appen.

Her er noen ideer du kan vurdere å legge til:

• Legg til brukergrensesnitt og kode for å fjerne filmer fra galleriet.
• Tillat sortering etter filmtittel, år osv.
• Innfør et rating system.

Jeg vil gjerne høre noen tilbakemeldinger du måtte ha om denne opplæringen via kommentarene nedenfor. Fikk du det lett å følge, eller var det deler du kjempet med? Jeg er alltid ute etter å gjøre mine opplæringsprogrammer bedre, så tilbakemeldinger er alltid veldig velkommen.

Glad reaksjonskoding!