React Crash Course per principianti, parte 4

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

Quindi, aggiungi il addNewMovie () metodo alla cima del  classe componente:

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

Il primo compito è impedire l'attivazione dell'evento di invio predefinito, cosa che facciamo con e.preventDefault (). Altrimenti, quando il modulo viene inviato, la pagina web si aggiornerà automaticamente, il che non è ciò che vogliamo.

Quindi, creiamo un nuovo oggetto film catturando i valori dei campi di input del modulo che abbiamo opportunamente memorizzati come proprietà della classe del componente in precedenza.

UN console.log () il comando emette il film oggetto in modo che possiamo verificare che sia stato creato correttamente al momento dell'invio del modulo.

Una volta che sei soddisfatto film oggetto è stato generato correttamente, andare avanti e cancellare il console.log () chiamata.

Per visualizzare il nuovo film nella nostra galleria, è necessario aggiungerlo al film oggetto di stato. Fatto ciò, React si prenderà cura dell'aggiornamento del DOM per noi.

Per fare ciò, crea un nuovo metodo in App.js (dove risiede l'oggetto dello stato dell'app) per gestire l'aggiunta di un film allo stato corrente.

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

Non dimenticare di associare il nuovo metodo a Questo quindi è disponibile in tutta la classe.

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

Per inciso, potresti chiederti perché abbiamo dovuto farlo qui, ma non per il addNewMovie () metodo che abbiamo aggiunto al  componente sopra. Questo è un effetto collaterale dell'uso di una funzione freccia ES6, poiché si lega automaticamente Questo per te. Questo piccolo trucco merita di essere ricordato poiché riduce la complessità del codice e migliora la leggibilità del codice.

Usare addMovieToGallery () nel nostro  codice componente figlio, semplicemente passiamo un riferimento ad esso tramite oggetti di scena. Nel App.js, aggiorna il  chiamare per essere:

Di nuovo dentro AddMovie.js, aggiorna il addNewMovie () metodo per passare l'oggetto film al addMovieToGallery () metodo tramite il AddMovie prop abbiamo appena creato.

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

Ora, quando compiliamo il modulo, otteniamo l'oggetto film emesso sulla console, come prima, ma questa volta è tramite il addMovieToGallery () metodo nel  componente.

Elimina il console.log () comando in addMovieToGallery () e sostituirlo con il seguente codice per aggiungere i dettagli del film inserito a film oggetto di stato:

addMovieToGallery (filmato) 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); 

Questo è molto simile a quello che abbiamo fatto nella parte tre per il loadAdditionalMovies () metodo. La differenza principale è che una chiave univoca deve essere generata, al volo, per ogni filmato aggiuntivo. Ciò si ottiene utilizzando il timestamp corrente come chiave univoca e aggiungendolo a film.

Ciò comporterà ogni film aggiuntivo, aggiunto tramite il modulo, con chiavi univoche.

movie1501686019706 movie1501686027906 movie1501686032929

… e così via.

Apri l'app "Movie Mojo" nel browser e aggiungi due nuovi film alla galleria tramite il modulo. Ci sono ulteriori immagini di poster di film aggiunte al ./ Public / manifesti / cartella per comodità, in modo da poter facilmente testare l'aggiunta di filmati alla galleria. Puoi accedervi scaricando il progetto finito dell'app.

Ogni volta che si invia il modulo, viene aggiunto un film aggiuntivo alla galleria!

Installazione di Movie Mojo

Fare clic sul collegamento a destra (a circa metà della pagina) per scaricare il file zip del progetto "Movie Mojo" completato. Una volta estratto, apri una finestra della riga di comando e vai a film-mojo directory e immettere:

installazione di npm

Ciò richiederà alcuni minuti per scaricare tutti i moduli "Node.js" necessari per eseguire il progetto.

Quindi digitare:

inizio di npm

Questo compilerà l'app React e la aprirà in un browser tramite un mini server web dedicato.

Conclusione

Abbiamo già parlato molto in questa serie di tutorial in quattro parti, quindi congratulazioni se hai completato tutto e seguito il codice.

Ora dovresti sentirti a tuo agio con le basi di React e spero che questo ti dia la sicurezza di andare avanti e creare app più complicate.

Consiglierei di scaricare il progetto "Movie Mojo" e di esaminare il codice sorgente per assicurarmi di aver capito come si integri.

C'è molto spazio per estendere l'app, quindi perché non provare a trovare nuove funzionalità extra? Questo è anche un ottimo modo per cementare il tuo apprendimento, tentando di implementare nuovi elementi React nell'app.

Ecco alcune idee che potresti considerare di aggiungere:

• Aggiungi UI e codice per rimuovere i film dalla galleria.
• Consenti l'ordinamento per titolo del film, anno, ecc.
• Introdurre un sistema di classificazione.

Mi piacerebbe sentire qualsiasi feedback che potresti avere su questo tutorial tramite i commenti qui sotto. Hai trovato facile seguire, o c'erano parti con cui hai lottato? Cerco sempre di migliorare le mie esercitazioni, quindi il feedback è sempre molto gradito.

Happy React!