React Tutorial, Teil 17: Die fünfte Phase der Arbeit an einer TODO-Anwendung, Ändern des Status von Komponenten

Im heutigen Teil der Übersetzung des React-Kurses empfehlen wir Ihnen, die nächste praktische Aufgabe abzuschließen und Ihrer Aufmerksamkeit eine Geschichte darüber zu präsentieren, wie Sie den Status von React-Komponenten ändern können.



→ 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 Komponentenlebenszyklus
Teil 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: Kursprojekt

Lektion 31. Workshop. TODO-Anwendung. Etappe Nummer 5

→ Original

»Job

Beim Starten unserer Todo-Anwendung stellen Sie möglicherweise fest, dass in der Konsole eine Benachrichtigung angezeigt wird, die angibt, dass wir nach der Konfiguration der checked Eigenschaft eines Elements in der TodoItem Komponente keinen Mechanismus für die Interaktion mit diesem Element in Form eines onChange Ereignishandlers onChange . Wenn Sie mit der Anwendungsoberfläche arbeiten, führt dies dazu, dass die auf der Seite angezeigten Flags nicht aktiviert oder deaktiviert werden können.

Hier werden Sie aufgefordert, ein Element des checkbox der TodoItem Komponente mit einem TodoItem Ereignishandler TodoItem , der in dieser Arbeitsphase ausreicht, um in Form einer Funktion dargestellt zu werden, die etwas an die Konsole ausgibt.

▍Lösung

So sieht der TodoItem Komponentencode jetzt aus, der in der Datei TodoItem.js gespeichert ist:

 import React from "react" function TodoItem(props) {   return (       <div className="todo-item">           <input type="checkbox" checked={props.item.completed}/>           <p>{props.item.text}</p>       </div>   ) } export default TodoItem 

Dies wird auf der Konsole angezeigt, wenn die Anwendung gestartet wird.


Konsolenbenachrichtigung

Gleichzeitig reagieren die Flags nicht auf unsere Effekte.

Um diese Benachrichtigung zu onChange und das Projekt für die weitere Arbeit vorzubereiten, reicht es aus, dem checkbox einen onChange Ereignishandler zuzuweisen. So sieht es im Code 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 

Hier verwenden wir als Handler eine einfache Funktion, die das Wort Checked! an die Konsole ausgibt Checked! . Gleichzeitig führt das Klicken auf die Flags nicht zu einer Änderung ihres Status, aber die Benachrichtigung von der Konsole, wie in der folgenden Abbildung dargestellt, verschwindet.


Flags funktionieren immer noch nicht, aber die Benachrichtigung von der Konsole ist verschwunden

Diese kleine Änderung an der Anwendung ermöglicht es uns, nachdem wir uns mit der Änderung des Status der Komponenten befasst haben, die Kontrollkästchen ordnungsgemäß zu aktivieren.

Lektion 32. Ändern des Status von Komponenten

→ Original

Beginnen wir mit einer Standardanwendung, die mit create-react-app in der Datei App.js erstellt wurde und den folgenden Code enthält:

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           count: 0       }   }     render() {       return (           <div>               <h1>{this.state.count}</h1>               <button>Change!</button>           </div>       )   } } export default App 

Die index.css styles, die in der Datei index.js enthalten ist, enthält die folgende Beschreibung der Stile:

 div {   display: flex;   flex-direction: column;   align-items: center;   justify-content: center; } h1 {   font-size: 3em; } button {   border: 1px solid lightgray;   background-color: transparent;   padding: 10px;   border-radius: 4px;  } button:hover {   cursor: pointer; } button:focus {   outline:0; } 

Zu diesem Zeitpunkt sieht die Anwendung wie in der folgenden Abbildung dargestellt aus.


Anwendungsseite im Browser

Heute werden wir darüber sprechen, wie der Zustand von Komponenten geändert werden kann. Wenn die Komponente einen Status hat, können durch Initialisieren einige Daten darin gespeichert werden. Wenn der Status jedoch nicht geändert werden könnte, würde die Komponente von ihrem Vorhandensein nicht besonders profitieren. Die Speicherung der darin enthaltenen Daten würde sich nicht wesentlich von beispielsweise dem harten Kopieren im Komponentencode unterscheiden.

Lassen Sie uns über die Anwendung sprechen, an deren Beispiel wir mit dem Status der Komponente arbeiten werden. Die App Komponente, deren Code oben dargestellt ist, ist eine klassenbasierte Komponente. Dies ist ziemlich offensichtlich, da wir diese Komponente benötigen, um einen Zustand zu haben. Im Komponentencode verwenden wir den Konstruktor.

Darin rufen wir wie immer die Methode super() und initialisieren den Status, indem wir die Eigenschaft count schreiben und ihm den Anfangswert 0 zuweisen. In der render() -Methode drucken wir einen Header der ersten Ebene, der den Wert der count Eigenschaft aus dem Status der Komponente darstellt, sowie eine Schaltfläche mit dem Wort Change! . All dies wird mit Stilen formatiert.

Wenn Sie in dieser Phase der Arbeit an der Anwendung diese in einem Browser öffnen und auf die Schaltfläche klicken, geschieht natürlich nichts. Wir müssen jedoch auf die Schaltfläche klicken, um den Status der Komponente zu ändern, was sich auf ihre count Eigenschaft auswirkt. Gleichzeitig haben wir bereits die Methode zur Behandlung von Ereignissen in React untersucht. Unsere Aufgabe besteht darin, einen Mechanismus zu erstellen, der bei einem Klick auf eine Schaltfläche die Zustandseigenschaft von count ändert.

onClick wir zur Lösung unseres Problems, indem wir die Schaltfläche mit einem onClick Ereignishandler onClick , der zunächst einfach etwas an die Konsole ausgibt.

Zu diesem Zweck fügen wir der Komponentenklasse eine neue Methode hinzu. Sie können es beliebig nennen, aber es ist üblich, solche Methoden aufzurufen, damit ihre Namen die Ereignisse anzeigen, die sie verarbeiten. Daher nennen wir es handleClick() , da wir es zum Verarbeiten des handleClick() . So sieht nun der App Komponentencode aus.

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           count: 0       }   }     handleClick() {       console.log("I'm working!")   }     render() {       return (           <div>               <h1>{this.state.count}</h1>               <button onClick={this.handleClick}>Change!</button>           </div>       )   } } export default App 

Bitte beachten Sie, dass wir unter Bezugnahme auf diese Methode aus render() eine Konstruktion der Form this.handleClick .

Wenn Sie nun auf die Schaltfläche klicken, wird die entsprechende Meldung in der Konsole angezeigt.


Durch Klicken auf die Schaltfläche wird die Klassenmethode aufgerufen.

Machen wir es jetzt so, dass durch Klicken auf die Schaltfläche die darüber angezeigte Zahl erhöht wird, dh der Status der Komponente geändert wird. Versuchen Sie vielleicht, den Status der Komponente direkt in der handleClick() -Methode zu handleClick() ? Nehmen wir an, wenn wir diese Methode wie folgt umschreiben:

 handleClick() {   this.state.count++ } 

Ich muss sofort sagen, dass dies mit dem Status der Komponenten in React nicht funktioniert. Der Versuch, einen solchen Code auszuführen, führt zu einem Fehler.

Der Zustand der Komponente kann mit der Kleidung verglichen werden, die eine Person trägt. Wenn er sich umziehen möchte, ändert oder streicht er die Kleidung nicht neu, ohne sich auszuziehen, sondern zieht sie aus und zieht etwas anderes an. Genau genommen arbeiten sie genau so mit dem Zustand der Komponenten.

Sie erinnern sich vielleicht, dass wir über eine spezielle Methode zum Ändern des Status gesprochen haben, die in Komponenten basierend auf Klassen verfügbar ist, da sie die React.Component Klasse erweitern. Dies ist die setState() -Methode. Es wird in Fällen verwendet, in denen Sie den Status einer Komponente ändern müssen. Diese Methode kann auf verschiedene Arten verwendet werden.

Denken Sie daran, dass ein Zustand ein Objekt ist. Versuchen setState() , ein Objekt an die setState() -Methode zu übergeben, das den Status ersetzt. Wir schreiben die handleClick() -Methode folgendermaßen um:

 handleClick() {   this.setState({ count: 1 }) } 

Der Versuch, diese Methode zu verwenden, führt zu folgendem Fehler: TypeError: Cannot read property 'setState' of undefined . Tatsächlich wird das, worüber wir jetzt sprechen, unter den React-Entwicklern sehr kontrovers diskutiert, und jetzt werde ich Ihnen einen sehr einfachen Weg zeigen, um dieses Problem zu lösen, was auf den ersten Blick ungewöhnlich erscheinen mag.

Der Punkt ist, dass jedes Mal, wenn eine handleClick() in unserem Fall handleClick() ) erstellt wird, in der die Methode setState() verwendet werden soll, diese Methode dieser zugeordnet werden muss. Dies erfolgt im Konstruktor. Der Komponentencode nach dieser Änderung sieht folgendermaßen aus:

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           count: 0       }       this.handleClick = this.handleClick.bind(this)   }     handleClick() {       this.setState({ count: 1 })   }     render() {       return (           <div>               <h1>{this.state.count}</h1>               <button onClick={this.handleClick}>Change!</button>           </div>       )   } } export default App 

Jetzt nach dem Klicken auf die Schaltfläche Change! Nummer 1 wird darüber angezeigt, Fehlermeldungen werden nicht angezeigt.


Durch Drücken einer Taste wird der Status geändert

Es stimmt, die Schaltfläche hat sich als "einmalig" herausgestellt. Nach dem ersten Klicken ändert sich 0 in 1 , und wenn Sie erneut darauf klicken, geschieht nichts. Im Allgemeinen ist dies nicht überraschend. Der Code, der beim Klicken auf die Schaltfläche aufgerufen wird, erfüllt seine Aufgabe und ändert jedes Mal den Status in einen neuen. Nach dem ersten Klicken auf die Schaltfläche unterscheidet sich der neue Status, in dem die Nummer 1 in der Eigenschaft count gespeichert ist, jedoch nicht vom alten. Um dieses Problem zu lösen, sollten Sie eine andere Möglichkeit in Betracht ziehen, mit der setState() -Methode zu arbeiten.

Wenn wir nicht daran interessiert sind, wie der vorherige Status der Komponente war, können wir einfach ein Objekt an diese Methode übergeben, das den Status ersetzt. Es kommt jedoch häufig vor, dass der neue Status einer Komponente vom alten abhängt. In unserem Fall bedeutet dies, dass wir basierend auf dem Wert der count Eigenschaft, die in der vorherigen Version des Status gespeichert ist, 1 zu diesem Wert hinzufügen möchten. In Fällen, in denen Sie den Status ändern müssen, müssen Sie wissen, was zuvor darin gespeichert war. Sie können der Methode setState() eine Funktion übergeben, die als Parameter die vorherige Version des Status empfängt. Sie können diesen Parameter beliebig prevState , in unserem Fall ist es prevState . Die Beschaffung dieser Funktion sieht folgendermaßen aus:

 handleClick() {   this.setState(prevState => {             }) } 

Sie könnten denken, dass es in einer solchen Funktion ausreicht, sich einfach mit einer Konstruktion der Form this.state auf den Zustand zu beziehen, aber dieser Ansatz passt nicht zu uns. Daher ist es wichtig, dass diese Funktion die vorherige Version des Komponentenstatus akzeptiert.

Die Funktion sollte eine neue Version des Status zurückgeben. So handleClick() die handleClick() -Methode aus, handleClick() dieses Problem zu handleClick() :

 handleClick() {   this.setState(prevState => {       return {           count: prevState.count + 1       }   }) } 

Beachten Sie, dass wir das Konstrukt count: prevState.count + 1 verwenden, um den neuen Wert der Eigenschaft count: prevState.count + 1 . Sie könnten denken, dass eine Konstruktion des Formulars count: prevState.count++ , aber der Operator ++ count: prevState.count++ Variable, auf die er angewendet wird. Dies bedeutet einen Versuch, die vorherige Version des Status zu ändern, sodass wir sie hier nicht verwenden.

Der vollständige Code der Komponentendatei sieht zu diesem Zeitpunkt folgendermaßen aus:

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           count: 0       }       this.handleClick = this.handleClick.bind(this)   }     handleClick() {       this.setState(prevState => {           return {               count: prevState.count + 1           }       })   }       render() {       return (           <div>               <h1>{this.state.count}</h1>               <button onClick={this.handleClick}>Change!</button>           </div>       )   } } export default App 

Jetzt erhöht jeder Klick auf die Schaltfläche den Zählerwert.


Jeder Klick auf die Schaltfläche erhöht den Zählerwert.

Was wir gerade herausgefunden haben, eröffnet uns große Möglichkeiten bei der Entwicklung von React-Anwendungen.

Wir haben bereits gesagt, dass eine übergeordnete Komponente über einen Eigenschaftsmechanismus Eigenschaften aus ihrem eigenen Status an untergeordnete Komponenten übergeben kann. Wenn React eine Änderung des Status der übergeordneten Komponente feststellt, wird die untergeordnete Komponente, an die dieser Status übergeben wird, erneut gerendert. Es sieht aus wie ein Aufruf der render() -Methode. Infolgedessen spiegelt die untergeordnete Komponente die neuen Daten wider, die im Status der übergeordneten Komponente gespeichert sind.

Zusammenfassung

Heute haben Sie die Todo-Anwendung für die weitere Arbeit vorbereitet und sich mit den Mechanismen vertraut gemacht, die in React zum Ändern des Status einer Komponente verwendet werden. Beim nächsten Mal werden Sie aufgefordert, die Funktionen der Trainingsanwendung anhand der heute erlernten Informationen zu erweitern.

Liebe Leser! Wie beurteilen Sie die Tatsache, dass der Status von Komponenten in React ohne spezielle Mechanismen nicht direkt geändert werden kann?