Crashkurs für Anfänger, Teil 4

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

Dann füge das hinzu addNewMovie () Methode an die Spitze der  Bauteilklasse:

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

Die erste Aufgabe besteht darin, zu verhindern, dass das standardmäßige Übermittlungsereignis ausgelöst wird e.preventDefault (). Ansonsten, wenn das Formular gesendet wird, wird die Webseite automatisch aktualisiert, was wir nicht möchten.

Anschließend erstellen wir ein neues Filmobjekt, indem wir die Werte des Formulareingabefelds verwenden, die wir früher als Komponentenklasseneigenschaften gespeichert haben.

EIN console.log () Befehl gibt das aus Film Objekt, damit wir testen können, dass es bei der Formularübergabe korrekt erstellt wird.

Sobald Sie zufrieden sind Film Objekt wird korrekt generiert, fahren Sie fort und löschen Sie das console.log () Anruf.

Um den neuen Film in unserer Galerie anzuzeigen, müssen wir ihn dem hinzufügen Film Zustandsobjekt. Sobald dies geschehen ist, kümmert sich React um die Aktualisierung des DOM für uns.

Um dies zu erreichen, erstellen Sie eine neue Methode in App.js (wo sich das App-Statusobjekt befindet), um dem aktuellen Status einen Film hinzuzufügen.

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

Vergessen Sie nicht, die neue Methode an die zu binden diese Es ist also in der gesamten Klasse verfügbar.

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

Übrigens fragen Sie sich vielleicht, warum wir dies hier tun mussten, aber nicht für die addNewMovie () Methode, die wir dem hinzugefügt haben  Komponente oben. Dies ist ein Nebeneffekt der Verwendung einer ES6-Pfeilfunktion, da diese automatisch gebunden wird diese für dich Dieser kleine Trick ist sehr erwähnenswert, da er die Codekomplexität reduziert und gleichzeitig die Lesbarkeit des Codes verbessert.

Benutzen addMovieToGallery () in unserer  Untergeordneter Komponentencode übergeben wir einfach einen Verweis darauf über Requisiten. Im App.js, Aktualisieren Sie die  anrufen zu sein:

Zurück in AddMovie.js, Aktualisieren Sie die addNewMovie () Methode zum Übergeben des Filmobjekts an addMovieToGallery () Methode über die addMovie Requisite, die wir gerade erstellt haben.

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

Wenn wir nun das Formular ausfüllen, wird das Filmobjekt wie zuvor auf der Konsole ausgegeben, diesmal jedoch über die addMovieToGallery () Methode in der  Komponente.

Löschen Sie die console.log () Befehl in addMovieToGallery () und ersetzen Sie es durch den folgenden Code, um die eingegebenen Filmdetails in das Fenster einzufügen Filme Zustandsobjekt:

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

Dies ist ziemlich ähnlich zu dem, was wir in Teil drei für das getan haben loadAdditionalMovies () Methode. Der Hauptunterschied besteht darin, dass für jeden zusätzlichen Filmeintrag sofort ein eindeutiger Schlüssel generiert werden muss. Dies wird erreicht, indem der aktuelle Zeitstempel als eindeutiger Schlüssel verwendet und an diesen angehängt wird Film.

Dies führt dazu, dass jeder zusätzliche Film, der über das Formular hinzugefügt wird, eindeutige Schlüssel hat.

movie1501686019706 movie1501686027906 movie1501686032929

… und so weiter.

Öffnen Sie die 'Movie Mojo'-App im Browser und fügen Sie der Galerie über das Formular zwei neue Filme hinzu. Es wurden zusätzliche Filmposterbilder hinzugefügt ./ Öffentlichkeit / Poster / Ordner, um das Hinzufügen von Filmen zur Galerie zu testen. Sie können auf diese zugreifen, indem Sie das fertige App-Projekt herunterladen.

Jedes Mal, wenn Sie das Formular absenden, wird der Galerie ein zusätzlicher Film hinzugefügt!

Movie Mojo installieren

Klicken Sie auf den Link rechts (ungefähr zur Hälfte der Seite), um die fertige ZIP-Datei des 'Movie Mojo' -Projekts herunterzuladen. Öffnen Sie nach dem Extrahieren ein Befehlszeilenfenster und navigieren Sie zum Film-Mojo Verzeichnis und geben Sie ein:

npm installieren

Es dauert einige Minuten, bis alle für die Ausführung des Projekts erforderlichen 'Node.js'-Module heruntergeladen sind.

Dann tippen Sie:

npm starten

Dadurch wird die React-App kompiliert und über einen dedizierten Mini-Webserver in einem Browser geöffnet.

Fazit

Wir haben in dieser vierteiligen Tutorialserie viel behandelt. Glückwunsch, wenn Sie den ganzen Weg durchgemacht und den Code gefolgt haben.

Sie sollten sich jetzt mit den Grundlagen von React vertraut machen. Dies gibt Ihnen hoffentlich die Sicherheit, weitere komplizierte Apps zu erstellen.

Ich empfehle, das Projekt 'Movie Mojo' herunterzuladen und den Quellcode zu überprüfen, um sicherzustellen, dass Sie verstehen, wie alles zusammenpasst.

Es gibt viel Spielraum, um die App zu erweitern. Warum versuchen Sie nicht, ein paar neue Funktionen zu entwickeln? Dies ist auch eine großartige Möglichkeit, Ihr Lernen zu festigen, indem Sie versuchen, neue React-Elemente in die App zu implementieren.

Hier sind einige Ideen, die Sie in Betracht ziehen könnten:

• Fügen Sie Benutzeroberfläche und Code hinzu, um Filme aus der Galerie zu entfernen.
• Sortieren nach Filmtitel, Jahr usw. Zulassen.
• Führen Sie ein Bewertungssystem ein.

Ich würde mich freuen, wenn Sie über die folgenden Kommentare Rückmeldungen zu diesem Tutorial erhalten. Fanden Sie es leicht zu folgen oder gab es Teile, mit denen Sie Probleme hatten? Ich bin immer auf der Suche nach besseren Tutorials, daher ist Feedback immer sehr willkommen.

Happy React-Codierung!