React Tutorial Teil 23: Erste Formulare Lektion

In diesem Teil der Übersetzung des React-Tutorials werden wir über das Arbeiten mit Formularen sprechen. Die heutige Lektion widmet sich insbesondere der Organisation der Interaktion von Komponenten und Textfeldern.



→ 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 41. Arbeiten mit Formularen, Teil 1

→ Original

Formulare sind ein wichtiger Bestandteil von Webanwendungen. Es stellte sich jedoch heraus, dass diejenigen, die an der Entwicklung von React beteiligt sind und mit Formen arbeiten, normalerweise gewisse Schwierigkeiten verursachen. Tatsache ist, dass React auf besondere Weise mit Formularen arbeitet. In dieser Lektion verwenden wir das Standardprojekt, das von create-react-app erstellt wurde. Die ursprüngliche Form der App.js Datei wird unten dargestellt.

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {}   }     render() {       return (           <div>               Code goes here           </div>       )   } } export default App 

Bitte beachten Sie, dass Sie mit dem Konzept des Anwendungsstatus vertraut sein müssen, um das Material dieser Lektion zu beherrschen. Wenn Sie alle vorherigen Lektionen des Kurses durchgearbeitet und Workshops unabhängig abgeschlossen haben, bedeutet dies, dass Sie über das Wissen verfügen, das Sie hier benötigen. Hier ist die React-Dokumentation zu Formularen. Es wird empfohlen, dass Sie sie ansehen, bevor Sie fortfahren.

In React funktionieren Formulare also etwas anders als in normalem JavaScript. In der üblichen Vorgehensweise werden Formulare auf Webseiten mit HTML beschrieben. Anschließend interagieren sie mithilfe der DOM-API über JavaScript mit ihnen. Insbesondere durch Klicken auf die Schaltfläche "Senden" sammeln sie Daten aus den vom Benutzer ausgefüllten Feldern und bereiten sie für das Senden an den Server vor, überprüfen sie und informieren den Benutzer gegebenenfalls darüber, dass er einige Felder falsch ausgefüllt hat. Anstatt in React darauf zu warten, dass alle Materialien in die Formularfelder eingegeben werden, bevor mit der Softwareverarbeitung fortgefahren wird, werden die Daten ständig anhand des Status der Anwendung überwacht. Dies läuft beispielsweise darauf hinaus, dass jedes vom Benutzer über die Tastatur eingegebene Zeichen sofort in den Status wechselt. Infolgedessen können wir in der React-Anwendung schnell mit der neuesten Version dessen arbeiten, was der Benutzer in die Formularfelder eingibt. Um diese Idee in Aktion zu demonstrieren, beginnen wir mit einer Beschreibung des Formulars, das ein reguläres Textfeld enthält.

Dazu beschreiben wir in dem Code, den die render() -Methode zurückgibt, das Formular. In der üblichen Vorgehensweise verfügt ein solches Formular über eine Schaltfläche, auf die die Programmmechanismen der Anwendung klicken, um die in dieses Formular eingegebenen Daten zu verarbeiten. In unserem Fall werden die vom Benutzer in das Feld eingegebenen Daten bei der Eingabe an die Anwendung gesendet. Dazu müssen wir das onChange . Im Handler dieses Ereignisses (nennen wir es handleChange() ) aktualisieren wir den Status, indem wir darauf schreiben, was in das Feld eingegeben wird. Dazu müssen wir erstens herausfinden, was in dem Feld enthalten ist, und zweitens diese Daten in einen Zustand versetzen. Erstellen Sie im Status eine Eigenschaft, in der der Inhalt des Felds gespeichert wird. In diesem Feld wird der Vorname des Benutzers firstName rufen wir die entsprechende Eigenschaft firstName und initialisieren sie mit einer leeren Zeichenfolge.

Danach hängen wir im Konstruktor den Ereignishandler handleChange() an this und verwenden im setState() Funktion setState() . Da der vorherige Wert, der in der Eigenschaft firstName state gespeichert wurde, für uns nicht von Interesse ist, können wir dieser Funktion einfach ein Objekt mit dem neuen Wert firstName . Was soll in diese Eigenschaft geschrieben werden?

Wenn Sie sich daran erinnern, wie Ereignishandler in JavaScript funktionieren, stellt sich heraus, dass ihnen beim Aufruf einige vordefinierte Parameter übergeben werden. In unserem Fall wird das Ereignisobjekt an den Handler übergeben. Es enthält die Daten, die uns interessieren. Das Textfeld, dessen Ereignis onChange wir verarbeiten, wird in diesem Objekt als event.target . Auf den Inhalt dieses Feldes kann mit dem Konstrukt event.target.value zugegriffen werden.

In der render() -Methode geben wir nun aus, was im Status gespeichert wird, und schauen uns an, was wir haben.

Hier ist der Code, der die obigen Ideen implementiert.

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           firstName: ""       }       this.handleChange = this.handleChange.bind(this)   }     handleChange(event) {       this.setState({           firstName: event.target.value       })   }     render() {       return (           <form>               <input type="text" placeholder="First Name" onChange={this.handleChange} />               <h1>{this.state.firstName}</h1>           </form>       )   } } export default App 

So sieht alles im Browser aus.


Anwendungsseite im Browser

Jedes in das Feld eingegebene Zeichen wird sofort in dem auf der Seite vorhandenen <h1> -Element angezeigt.

Lassen Sie uns nun überlegen, wie Sie dem Formular ein weiteres Feld für den Nachnamen des Benutzers hinzufügen können. Um die korrekte Verarbeitung der in dieses Feld eingegebenen Daten zu gewährleisten, müssen wir dem Status natürlich eine weitere Eigenschaft hinzufügen und an Mechanismen arbeiten, die den Status bei der Eingabe von Daten in das Feld aktualisieren.

Ein Ansatz zur Lösung dieses Problems besteht darin, einen separaten Ereignishandler für das neue Feld zu erstellen. Für ein kleines Formular mit mehreren Eingabefeldern ist dies ein völlig normaler Ansatz. Wenn es sich jedoch um ein Formular mit Dutzenden von Feldern handelt, ist es keine gute Idee, für jedes Feld einen separaten onChange Ereignishandler zu onChange .

Um die Felder in derselben Ereignisbehandlungsroutine zu unterscheiden, wenn sie geändert wird, weisen wir den Feldern die firstName , die genau den Namen der Eigenschaften entsprechen, die zum Speichern der firstName im Status ( firstName und lastName ) verwendet werden. Danach können wir mit dem Ereignisobjekt, das an den Handler übergeben wird, den Namen des Felds, die Änderungen, die zu seinem Aufruf geführt haben, herausfinden und diesen Namen verwenden. Wir werden es verwenden, indem wir den Namen der Eigenschaft state festlegen, in der wir aktualisierte Daten hinzufügen möchten. Hier ist der Code, der diese Funktion implementiert:

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           firstName: "",           lastName: ""       }       this.handleChange = this.handleChange.bind(this)   }     handleChange(event) {       this.setState({           [event.target.name]: event.target.value       })   }     render() {       return (           <form>               <input type="text" name="firstName" placeholder="First Name" onChange={this.handleChange} />               <br />               <input type="text" name="lastName" placeholder="Last Name" onChange={this.handleChange} />               <h1>{this.state.firstName} {this.state.lastName}</h1>           </form>       )   } } export default App 

Beachten Sie, dass wir durch Festlegen des Eigenschaftsnamens des an setState() Objekts das Konstrukt event.target.name in rechteckige Klammern setzen.


Anwendungsseite im Browser

Die Seite zeigt nun an, was im ersten Feld und was im zweiten Feld eingegeben wird.

Die Prinzipien der Arbeit mit Textfeldern, die wir gerade untersucht haben, gelten auch für andere darauf basierende Felder. Dies können beispielsweise Felder zur Eingabe von E-Mail-Adressen, Telefonen und Nummern sein. Die in solche Felder eingegebenen Daten können unter Verwendung der oben diskutierten Mechanismen verarbeitet werden, für deren Betrieb es wichtig ist, dass die Feldnamen den Namen der Eigenschaften im Zustand der Komponente entsprechen, in der die Daten dieser Felder gespeichert sind.

In der nächsten Lektion werden wir über die Arbeit mit anderen Formularelementen sprechen. Hier werden wir auf ein anderes Thema im Zusammenhang mit der sogenannten „kontrollierten Komponente“ eingehen, über das Sie, wenn Sie sich die React- Dokumentation zu Formularen angesehen haben, bereits etwas gelesen haben.

Wenn wir möchten, dass das, was im Feld angezeigt wird, genau dem entspricht, was im Anwendungsstatus gespeichert ist, können wir den oben beschriebenen Ansatz verwenden, bei dem der Status aktualisiert wird, wenn Sie Daten in das Feld eingeben. Der Zustand ist reaktiv. Bei Verwendung von Formularelementen, die verwaltete Komponenten sind, wird die Anzeige in diesen Elementen vom Status gesteuert. Mit diesem Ansatz ist es die einzige Quelle für echte Komponentendaten. Um dies zu erreichen, reicht es aus, dem Code, der das Formularelement beschreibt, das Wertattribut hinzuzufügen und die dem Feld entsprechende Zustandseigenschaft anzugeben. So sieht der Anwendungscode jetzt aus.

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           firstName: "",           lastName: ""       }       this.handleChange = this.handleChange.bind(this)   }     handleChange(event) {       this.setState({           [event.target.name]: event.target.value       })   }     render() {       return (           <form>               <input                   type="text"                   value={this.state.firstName}                   name="firstName"                   placeholder="First Name"                   onChange={this.handleChange}               />               <br />               <input                   type="text"                   value={this.state.lastName}                   name="lastName"                   placeholder="Last Name"                   onChange={this.handleChange}               />               <h1>{this.state.firstName} {this.state.lastName}</h1>           </form>       )   } } export default App 

Nach diesen Änderungen funktioniert die Anwendung genau wie zuvor. Der Hauptunterschied zur vorherigen Version besteht darin, dass im Feld angezeigt wird, was im Status gespeichert ist.

Ich möchte einen Rat geben, der Sie in Zukunft vor Fehlern bewahrt, die nur sehr schwer zu debuggen sind. So sieht der onChange Ereignishandlercode jetzt aus:

 handleChange(event) {   this.setState({       [event.target.name]: event.target.value   }) } 

Es wird empfohlen, beim setState() an setState() Objekts nicht direkt auf die Eigenschaften des event setState() , sondern im Voraus zu extrahieren, was Sie benötigen:

 handleChange(event) {   const {name, value} = event.target   this.setState({       [name]: value   }) } 

Hier werden wir nicht auf Details zu Fehlern eingehen, die durch die Erstellung von Ereignishandlern auf diese Weise vermieden werden können. Wenn Sie interessiert sind, lesen Sie das SyntheticEvent in der React-Dokumentation.

Zusammenfassung

In dieser Lektion haben Sie zunächst die Mechanismen für die Arbeit mit Formularen in React kennengelernt. Nächstes Mal werden wir dieses Thema fortsetzen.

Liebe Leser! Verwenden Sie zusätzliche Bibliotheken, wenn Sie mit Formularen in React arbeiten?