Im heutigen Teil der Übersetzung des React-Lernprogramms können Sie weiter an der Todo-Anwendung arbeiten und sicherstellen, dass das Klicken auf die Flags den Status der Komponente beeinflusst.
→
Teil 1: Kursübersicht, Gründe für die Beliebtheit von React, ReactDOM und JSX→
Teil 2: Funktionskomponenten→
Teil 3: Komponentendateien, Projektstruktur→
Teil 4: übergeordnete und untergeordnete Komponenten→
Teil 5: Beginn der Arbeit an einer TODO-Anwendung, Grundlagen des Stylings→
Teil 6: Über einige Funktionen des Kurses, JSX und JavaScript→
Teil 7: Inline-Stile→
Teil 8: Fortsetzung der Arbeit an der TODO-Anwendung, Vertrautheit mit den Eigenschaften von Komponenten→
Teil 9: Komponenteneigenschaften→
Teil 10: Workshop zum Arbeiten mit Komponenteneigenschaften und Styling→
Teil 11: Dynamische Markup-Generierung und Map-Arrays-Methode→
Teil 12: Workshop, dritte Phase der Arbeit an einer TODO-Anwendung→
Teil 13: Klassenbasierte Komponenten→
Teil 14: Workshop zu klassenbasierten Komponenten, Komponentenstatus→
Teil 15: Komponentengesundheitsworkshops→
Teil 16: Die vierte Phase der Arbeit an einer TODO-Anwendung, die Ereignisbehandlung→
Teil 17: Fünfte Phase der Arbeit an einer TODO-Anwendung, Änderung des Status von Komponenten→
Teil 18: Die sechste Phase der Arbeit an einer TODO-Anwendung→
Teil 19: Methoden des KomponentenlebenszyklusTeil 20: Die erste Lektion in bedingtem Rendern→
Teil 21: Zweite Lektion und Workshop zum bedingten Rendern→
Teil 22: Die siebte Phase der Arbeit an einer TODO-Anwendung, bei der Daten aus externen Quellen heruntergeladen werden→
Teil 23: Erste Lektion zum Arbeiten mit Formularen→
Teil 24: Lektion der zweiten Form→
Teil 25: Workshop zum Arbeiten mit Formularen→
Teil 26: Anwendungsarchitektur, Container- / Komponentenmuster→
Teil 27: KursprojektLektion 33. Workshop. TODO-Anwendung. Etappe Nummer 6
→
Original»Job
In dieser praktischen Lektion werden wir weiter an der Todo-Anwendung arbeiten und sicherstellen, dass Benutzeraktionen den Status der Komponente beeinflussen. Es geht darum, es uns zu ermöglichen, die Elemente auf der Aufgabenliste als erledigt oder nicht erledigt zu markieren. Im Folgenden finden Sie den Code der
App Komponente sowie einige der verfügbaren Werkstücke und Kommentare, die Sie bei der Ausführung der Aufgabe unterstützen sollen. Hier ist, wozu Sie heute eingeladen sind:
- Erstellen Sie in der
App Komponente einen Ereignishandler, der auf Flag-Änderungen reagiert (es handelt sich um das Ereignis onChange ), und ändert den Status der Anwendung entsprechend. Vielleicht ist dies der schwierigste Teil der heutigen Aufgabe. Um damit fertig zu werden, achten Sie auf die Kommentare und Leerzeichen im Code. TodoItem die entsprechende Methode an die TodoItem Komponente.TodoItem in der TodoItem Komponente einen Mechanismus, der beim onChange des onChange Ereignisses die an die Komponenteninstanz übergebene Methode aufruft und ihr die onChange ( id ) übergibt, die dem Flag entspricht, auf das der Benutzer geklickt hat.
Hier ist der Code für die
App Komponente:
import React from "react" import TodoItem from "./TodoItem" import todosData from "./todosData" class App extends React.Component { constructor() { super() this.state = { todos: todosData } this.handleChange = this.handleChange.bind(this) } handleChange(id) {
▍Lösung
Erstellen Sie zunächst einen einfachen Mechanismus zum Überprüfen des Aufrufs der
handleChange() -Methode. Wir bringen es nämlich in diese Form:
handleChange(id) { console.log("Changed", id) }
Jetzt implementieren wir, was gemäß den Absätzen 2 und 3 der Aufgabe zu tun ist. Das heißt, wir stellen eine Verbindung zwischen dem Klicken auf das Flag und dem Aufrufen der
handleChange() -Methode her, indem
handleChange() die
id dieses Flags an dieses übergeben.
Um einen Verweis auf
handleChange() an eine Instanz der
TodoItem Komponente zu übergeben, können Sie das Gleiche tun, indem Sie Eigenschaften an diese übergeben und den Code zum Erstellen der Liste der Komponenten wie
TodoItem neu schreiben:
const todoItems = this.state.todos.map(item => <TodoItem key={item.id} item={item} handleChange={this.handleChange}/>)
Beachten Sie, dass die
handleChange Eigenschaft, die
TodoItem Komponenten zur Verfügung
TodoItem , einen Verweis auf die
handleChange Methode der Instanz der
App Komponente enthält. In der
TodoItem Komponente kann auf diese Methode auf dieselbe Weise zugegriffen werden wie auf andere an sie übergebene Eigenschaften. Zu diesem Zeitpunkt sieht der
TodoItem Code folgendermaßen aus:
import React from "react" function TodoItem(props) { return ( <div className="todo-item"> <input type="checkbox" checked={props.item.completed} onChange={() => console.log("Changed!")} /> <p>{props.item.text}</p> </div> ) } export default TodoItem
Um die
handleChange Methode im Komponentencode
handleChange , können Sie ein Konstrukt der Form
props.handleChange() . In diesem Fall muss diese Methode die
id Elements übergeben. Der
onChange Ereignishandler akzeptiert ein Ereignisobjekt. Wir brauchen dieses Objekt nicht, um die
handleChange() -Methode
handleChange() . Wir schreiben den Code, in dem wir dem Element den
onChange Ereignishandler zuweisen, wie folgt um:
onChange={(event) => props.handleChange(props.item.id)}
Hier rufen wir die
handleChange() -Methode auf und übergeben ihr den Elementbezeichner aus den an sie übergebenen Eigenschaften einer anderen Funktion, die das Ereignisobjekt akzeptiert. Da wir dieses Objekt hier nicht verwenden, kann der Code folgendermaßen umgeschrieben werden:
onChange={() => props.handleChange(props.item.id)}
Versuchen Sie nun, die Anwendung auszuführen, und klicken Sie beim Öffnen der Konsole auf die Kontrollkästchen.
Testen der handleChange () -MethodeNachrichten mit Bezeichnern von Flags, mit denen wir auf klicken, gelangen zur Konsole. Die Flags ändern jedoch noch nicht das Erscheinungsbild, da die
handleChange() -Methode
handleChange() keinen Mechanismus zum Ändern des Status einer Komponente implementiert
handleChange() . Infolgedessen haben wir uns gerade mit dem zweiten und dritten Teil des Auftrags befasst, und jetzt können wir beginnen, an seinem ersten, vielleicht interessantesten Teil, in Bezug auf die Arbeit mit dem Staat zu arbeiten.
Zunächst müssen wir das Problem bezüglich des Status lösen, in dem ein Array in einem Status gespeichert ist, dessen Element als Reaktion auf einen Klick auf ein Flag geändert werden muss. Wir sollten jedoch das in der alten Version des Status gespeicherte Array nicht ändern. Das heißt, Sie können beispielsweise nicht einfach durch ein Array von Objekten gehen, die sich bereits in einem Status befinden, das erforderliche Element finden und dessen
completed Eigenschaft ändern. Wir brauchen, dass nach dem Ändern des Zustands ein neues Array gebildet wird, von dem eines der Elemente geändert wird und der Rest derselbe bleibt wie zuvor. Einer der Ansätze zur Bildung eines solchen Arrays ist die Verwendung der Array-Methode
map() , die in den Kommentaren zur Aufgabe erwähnt wird. Wir werden den Code in der
setState() -Methode schreiben. Lassen Sie uns
handleChange() Code der
handleChange() -Methode aus der
App Komponente in das folgende Formular bringen:
handleChange(id) { this.setState(prevState => { }) }
Mit der
map() -Methode
prevState.todos wir nun das Array
prevState.todos und suchen nach dem Element, das wir darin benötigen,
prevState.todos dem Element, dessen
id an die
handleChange() -Methode übergeben wird, und ändern dann die
completed Eigenschaft. Die
map() -Methode gibt ein neues Array zurück, das im neuen Status der Anwendung verwendet wird. Daher schreiben wir dieses Array in eine Konstante. So sieht es aus:
handleChange(id) { this.setState(prevState => { const updatedTodos = prevState.todos.map(todo => { if (todo.id === id) { todo.completed = !todo.completed } return todo }) return { todos: updatedTodos } }) }
Wenn hier während der Verarbeitung des Arrays mit
map() ein Element
handleChange() , dessen
id gleich der an die
handleChange() -Methode übergebenen
handleChange() ist, wird der Wert der
completed Eigenschaft dieses Elements umgekehrt (
true bis
false und umgekehrt). Danach gibt
map() unabhängig davon, ob das Element geändert wurde, dieses Element zurück. Es fällt in ein neues Array (hier dargestellt durch die
updatedTodos Konstante) unter demselben Index, unter dem sich das entsprechende Element aus der vorherigen Version des Status im
todos Array befand. Nachdem das gesamte Array gescannt und das Array
updatedTodos vollständig gebildet wurde, wird dieses Array als Wert der Eigenschaft
todos des Objekts verwendet, das von der Methode
setState() wird, bei der es sich um eine neue Version des Status handelt.
Wenn Sie die Anwendung jetzt starten, stellen Sie möglicherweise fest, dass die Flags auf unsere Effekte reagieren. Dies deutet darauf hin, dass durch Klicken auf sie der Status der Anwendung geändert wird. Anschließend werden sie mit neuen Daten neu gerendert.
Zusammenfassung
Heute hatten wir beim Schreiben eine funktionierende Todo-Anwendung zur Verfügung, bei der wir viele der von uns untersuchten React-Konzepte verwendeten. Tatsächlich ist es immer noch durchaus möglich, es zu verfeinern, insbesondere zu stilisieren und seine Fähigkeiten zu erweitern. Wir werden in einer der folgenden Klassen zu ihm zurückkehren.
Liebe Leser! Haben Sie die heutige praktische Arbeit gemeistert?
