React Crash Course för nybörjare, del 4

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

Lägg sedan till addNewMovie () metod till toppen av  komponent klass:

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örsta uppgiften är att förhindra att standardinsändningshändelsen avfyras, vilket vi gör med e.preventDefault (). Annars, när formuläret skickas, uppdateras webbsidan automatiskt, vilket inte är vad vi vill ha.

Därefter skapar vi ett nytt filmobjekt genom att ta tag i formfältvärdena som vi tidigare lagrat som komponenter i klassklassen.

en console.log () kommando utmatar film objekt så att vi kan testa det skapas korrekt vid formulärinsändning.

När du väl är nöjd film objektet skapas korrekt, fortsätt och ta bort console.log () ring upp.

För att visa den nya filmen i vårt galleri måste vi lägga till den i film statobjekt. När detta är klart kommer React att ta hand om att uppdatera DOM för oss.

För att uppnå detta, skapa en ny metod i App.js (där app-statobjektet lever) för att hantera att lägga till en film i det aktuella tillståndet.

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

Glöm inte att binda den nya metoden till detta så det är tillgängligt i hela klassen.

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

Förresten kanske du undrar varför vi behövde göra det här men inte för addNewMovie () metod som vi lagt till i  komponent ovan. Detta är en bieffekt av att använda en ES6-pilfunktion, eftersom den automatiskt binder detta till dig. Det här lilla tricket är väl värt att komma ihåg eftersom det minskar kodkomplexiteten, samtidigt som du förbättrar kodens läsbarhet.

Att använda addMovieToGallery () i vår  barnkomponentkod, skickar vi helt enkelt ner en referens till det via rekvisita. I App.js, uppdatera  ring för att vara:

Tillbaka in AddMovie.js, uppdatera addNewMovie () Metod för att överföra filmobjektet till addMovieToGallery () metod via addMovie prop vi just skapat.

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

Nu när vi fyller i formuläret får vi filmen objektet utmatas till konsolen, som tidigare, men den här gången är det via addMovieToGallery () metod i  komponent.

Ta bort console.log () kommando i addMovieToGallery () och ersätt det med följande kod för att lägga till de angivna film detaljerna till bio statligt 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); 

Detta är ungefär som det vi gjorde i del tre för loadAdditionalMovies () metod. Huvudskillnaden är att en unik nyckel måste genereras, på flugan, för varje extra filminspelning. Detta uppnås genom att använda den aktuella tidsstämpeln som den unika nyckeln och lägga till den till film.

Detta kommer att resultera i varje ytterligare film, adderad via formuläret, med unika nycklar.

movie1501686019706 movie1501686027906 movie1501686032929

… och så vidare.

Öppna "Movie Mojo" -appen i webbläsaren och lägg till två nya filmer i galleriet via formuläret. Det finns extra filmaffisch bilder som läggs till ./ Public / affischer / mapp för bekvämlighet, så du kan enkelt testa att lägga till filmer i galleriet. Du kan komma åt dessa genom att ladda ner det färdiga appprojektet.

Varje gång du skickar in formuläret läggs en extra film till galleriet!

Installera Movie Mojo

Klicka på länken till höger (ungefär halvvägs ner på sidan) för att ladda ner det färdiga "Movie Mojo" -projektets zip-fil. När det är extraherat öppnar du ett kommandoradsfönster och navigerar till movie-mojo katalog och ange:

npm installera

Det tar några minuter att ladda ner alla modulerna Node.js som behövs för att köra projektet.

Skriv sedan:

npm start

Detta kommer att kompilera React-appen och öppna den i en webbläsare via en dedikerad mini-webbserver.

Slutsats

Vi har täckt en hel del i den här fyradelade handledningsserien, så grattis om du har gjort det hela vägen och följt med koden.

Du bör nu känna dig bekväm med Reacts grunder, och detta kommer förhoppningsvis ge dig självförtroendet att fortsätta och bygga mer komplicerade appar.

Jag skulle rekommendera att ladda ner "Movie Mojo" -projektet och undersöka källkoden för att du förstår hur allt passar ihop.

Det finns mycket utrymme att förlänga appen, så varför försök inte komma med några nya extrafunktioner? Detta är också ett utmärkt sätt att cementera ditt lärande, genom att försöka implementera nya React-element till appen.

Här är några idéer du kan överväga att lägga till:

• Lägg till användargränssnitt och kod för att ta bort filmer från galleriet.
• Tillåt sortering efter filmtitel, år osv.
• Presentera ett betygssystem.

Jag skulle gärna höra någon feedback du kanske har om denna handledning via kommentarerna nedan. Fanns det lätt att följa, eller var det delar du kämpade med? Jag letar alltid efter att göra mina tutorials bättre, så feedback är alltid mycket välkommen.

Glad Reaktionskodning!