React Tutorial, Teil 16: Die vierte Phase der Arbeit an einer TODO-Anwendung, Ereignisverarbeitung

Im heutigen Teil der Übersetzung des React-Tutorials werden wir weiter an der Todo-Anwendung arbeiten und darüber sprechen, wie React mit Ereignissen umgeht.



→ 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 29. Workshop. TODO-Anwendung. Etappe Nummer 4

→ Original

»Job

Beim letzten Mal haben wir die Aufgabenliste für die Anwendung aus der JSON-Datei heruntergeladen und dann durch das resultierende Array mithilfe der map() -Methode eine Reihe von Komponenten gebildet. Wir möchten diese Daten ändern. Und das können wir nur, wenn wir sie in den Zustand der Komponente vorladen.

Die heutige Aufgabe besteht darin, die App Komponente in eine Statuskomponente zu konvertieren und die importierten Falldaten in den Status dieser Komponente zu laden.

▍Lösung

Rufen Sie den App Komponentencode auf, der bereits in unserem Projekt enthalten ist:

 import React from "react" import TodoItem from "./TodoItem" import todosData from "./todosData" function App() {   const todoItems = todosData.map(item => <TodoItem key={item.id} item={item}/>)     return (       <div className="todo-list">           {todoItems}       </div>   ) } export default App 

Um Daten aus der todosData ändern zu können, müssen wir das, was jetzt in todosData gespeichert todosData in den Status der App Komponente todosData .

Um dieses Problem zu lösen, müssen wir zuerst die Funktionskomponente der App in eine Komponente umwandeln, die auf der Klasse basiert. Dann müssen wir die Daten von todosData in den Status laden und bei der Bildung der Liste der TodoItem Komponenten nicht mehr das todosData Array umgehen, sondern das Array mit denselben Daten, die im Status gespeichert sind. So würde es aussehen:

 import React from "react" import TodoItem from "./TodoItem" import todosData from "./todosData" class App extends React.Component {   constructor() {       super()       this.state = {           todos: todosData       }   }     render() {       const todoItems = this.state.todos.map(item => <TodoItem key={item.id} item={item}/>)             return (           <div className="todo-list">               {todoItems}           </div>       )   } } export default App 

Es ist zu beachten, dass sich das Erscheinungsbild der Anwendung nach all diesen Transformationen nicht geändert hat. Nachdem wir sie abgeschlossen haben, haben wir sie für die weitere Bearbeitung vorbereitet.

Lektion 30. Behandeln von Ereignissen in Reaktion

→ Original

Die Ereignisbehandlung ist das, was Webanwendungen antreibt und was sie von einfachen statischen Websites unterscheidet. Die Ereignisbehandlung in React ist recht einfach und ähnelt der Verarbeitung von Ereignissen in normalem HTML. So gibt es beispielsweise in React Ereignishandler für onClick und onSubmit , die den ähnlichen HTML-Mechanismen ähneln, die in Form von onclick und onsubmit , und onsubmit nicht nur in Bezug auf Namen (in React werden ihre Namen jedoch mithilfe eines onsubmit gebildet), sondern auch in wie genau sie mit ihnen arbeiten.

Hier werden Beispiele betrachtet, die mit einer Standardanwendung experimentieren, die mit create-react-app und deren App Komponentendatei den folgenden Code enthält:

 import React from "react" function App() {   return (       <div>           <img src="https://www.fillmurray.com/200/100"/>           <br />           <br />           <button>Click me</button>       </div>   ) } export default App 

So sieht unsere Anwendung in einem Browser aus.


Anwendungsseite im Browser

Bevor wir ernsthaft über das Ändern des Status von Komponenten mithilfe der setState() -Methode sprechen können, müssen wir uns mit Ereignissen und der Ereignisbehandlung in React befassen. Ereignisverarbeitungsmechanismen ermöglichen es dem Benutzer der Anwendung, mit ihm zu interagieren. Eine Anwendung kann beispielsweise auf click oder hover Ereignisse reagieren und bestimmte Aktionen ausführen, wenn diese Ereignisse auftreten.

Die Ereignisbehandlung in React ist eigentlich ziemlich einfach. Wenn Sie mit den Standard-HTML-Mechanismen vertraut sind, die zum onclick Ereignishandlern zu Steuerelementen verwendet werden, wie onclick B. dem onclick Ereignishandler, werden Sie sofort die Ähnlichkeiten mit den Mechanismen erkennen, die React uns bietet.

Um beispielsweise mithilfe von HTML zu ermöglichen, dass durch Klicken auf eine bestimmte Schaltfläche eine Funktion ausgeführt wird, können Sie diese Konstruktion verwenden (vorausgesetzt, diese Funktion ist vorhanden und zugänglich):

 <button onclick="myFunction()">Click me</button> 

Wie bereits erwähnt, haben Event-Handler in React Namen, die nach Regeln im onclick wurden. Das heißt, onclick wird hier zu onclick . Gleiches gilt für den onMouseOver Ereignishandler und für andere Handler. Der Grund für diese Änderung liegt darin, dass ein für JavaScript üblicher Ansatz zur Benennung von Entitäten verwendet wird.

Lassen Sie uns nun mit unserem Code arbeiten und die Schaltfläche auf Klicks reagieren lassen. Anstatt den Code an den Handler zu übergeben, um die Funktion als Zeichenfolge aufzurufen, übergeben wir den Namen der Funktion in geschweiften Klammern. Die Beschaffung des entsprechenden Fragmentes unseres Codes sieht nun folgendermaßen aus:

 <button onClick={}>Click me</button> 

Wenn Sie sich den Code der App Komponente ansehen, die wir in diesem Beispiel verwenden, werden Sie feststellen, dass noch keine Funktion deklariert ist, die Sie beim Klicken auf die Schaltfläche aufrufen möchten. Im Allgemeinen können wir jetzt mit einer anonymen Funktion auskommen, die direkt im Code deklariert ist, der die Schaltfläche beschreibt. So würde es aussehen:

 <button onClick={() => console.log("I was clicked!")}>Click me</button> 

Wenn Sie nun auf die Schaltfläche klicken, wurde der Text I was clicked! .

Der gleiche Effekt kann erzielt werden, indem eine unabhängige Funktion deklariert und der Code der Komponentendatei in die folgende Form gebracht wird:

 import React from "react" function handleClick() {   console.log("I was clicked") } function App() {   return (       <div>           <img src="https://www.fillmurray.com/200/100"/>           <br />           <br />           <button onClick={handleClick}>Click me</button>       </div>   ) } export default App 

Eine vollständige Liste der von React unterstützten Ereignisse finden Sie auf dieser Dokumentationsseite.

Versuchen Sie nun, unsere Anwendung mit einer neuen Funktion auszustatten. Stellen Sie nämlich sicher, dass beim Bewegen des Mauszeigers über das Bild in der Konsole eine Meldung angezeigt wird. Dazu müssen Sie in der Dokumentation ein geeignetes Ereignis finden und dessen Verarbeitung organisieren.

Tatsächlich kann dieses Problem auf verschiedene Arten gelöst werden. Wir werden seine Lösung basierend auf dem Ereignis onMouseOver demonstrieren. Wenn dieses Ereignis eintritt, wird eine Meldung in der Konsole angezeigt. So sieht unser Code jetzt aus:

 import React from "react" function handleClick() {   console.log("I was clicked") } function App() {   return (       <div>           <img onMouseOver={() => console.log("Hovered!")} src="https://www.fillmurray.com/200/100"/>           <br />           <br />           <button onClick={handleClick}>Click me</button>       </div>   ) } export default App 

Die Ereignisverarbeitung bietet dem Programmierer eine große Chance, die sich natürlich nicht auf die Ausgabe von Nachrichten an die Konsole beschränkt. In Zukunft werden wir darüber sprechen, wie die Ereignisverarbeitung in Verbindung mit der Möglichkeit, den Status von Komponenten zu ändern, es unseren Anwendungen ermöglicht, die ihnen zugewiesenen Aufgaben zu lösen.

Wie immer empfehlen wir Ihnen, sich etwas Zeit zu nehmen, um mit dem zu experimentieren, was Sie heute gelernt haben.

Zusammenfassung

Heute haben Sie ein wenig praktische Arbeit geleistet, die den Grundstein für wichtige Änderungen an der Todo-Anwendung gelegt und sich mit den Ereignisbehandlungsmechanismen in React vertraut gemacht hat. Das nächste Mal wird Ihnen ein weiterer Workshop angeboten und ein neues Thema vorgestellt.

Liebe Leser! Wenn Sie sich mit der Methodik der Ereignisverarbeitung in React vertraut gemacht und mit dem Gelernten experimentiert haben, teilen Sie uns dies bitte mit.