Heute setzen wir die Diskussion über die Verwendung von Formularen in React fort. Letztes Mal haben wir die Merkmale des Zusammenspiels von Komponenten und Textfeldern untersucht. Hier diskutieren wir die Arbeit mit anderen Formularelementen.
→
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 42. Arbeiten mit Formularen, Teil 2
→
OriginalIn dieser Lektion werden wir über Felder zur Eingabe von mehrzeiligem Text, über Flags, über Optionsfelder (sie werden auch als Optionsfelder bezeichnet) und über Felder mit Listen sprechen. Bisher haben wir nur in Betracht gezogen, mit normalen Texteingabefeldern zu arbeiten.
Hier ist der Code für die
App Komponente, mit der wir die heutigen Experimente beginnen werden:
import React, {Component} from "react" class App extends Component { constructor() { super() this.state = { firstName: "", lastName: "" } this.handleChange = this.handleChange.bind(this) } handleChange(event) { const {name, value} = event.target this.setState({ [name]: 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} /> { /** * : * * <textarea /> * <input type="checkbox" /> * <input type="radio" /> * <select> <option> */ } <h1>{this.state.firstName} {this.state.lastName}</h1> </form> ) } } export default App
So sieht die Anwendungsseite im Browser in dieser Arbeitsphase aus.
Anwendungsseite im BrowserFormulare enthalten normalerweise nicht nur Felder, in die kurze Zeilen eingegeben werden. Wenn Sie Formulare mit anderen Elementen ausstatten, ist die Arbeit mit ihnen in React etwas kompliziert, obwohl dies nichts Besonderes ist.
Im obigen Code gibt es ein auskommentiertes Fragment, das die Elemente auflistet, über die wir sprechen werden. Beginnen wir mit dem Feld für die Eingabe von mehrzeiligem Text - dem
textarea . Es ist wahrscheinlich am einfachsten zu verstehen, wie man mit ihm arbeitet. Wenn Sie dieses Element beim Erstellen regulärer HTML-Formulare verwendet haben, wissen Sie, dass dies kein selbstschließendes Tag ist, wie dies beim
input der Fall war. Es hat öffnende und schließende Teile.
Fügen Sie dieses Element zum Formular hinzu, indem Sie unmittelbar nach dem Kommentar den folgenden Code einfügen:
<br /> <textarea></textarea>
Wenn Sie sich jetzt die Anwendungsseite ansehen, können Sie sehen, wie ein Feld zur Eingabe von mehrzeiligem Text darauf angezeigt wurde.
Feld zur Eingabe von Text auf der SeiteWie Sie sehen können, ist dieses Feld etwas höher als normale Felder. Der Benutzer kann seine Größe mithilfe der Markierung unten rechts ändern. Dank der
rows und
cols Sie bei der Beschreibung dieses Elements die Abmessungen angeben. Wenn Sie im normalen HTML-Code nach der Anzeige Text enthalten möchten, geben Sie dazu den gewünschten Text zwischen den öffnenden und schließenden Tags des Elements ein. In React wird die Arbeit mit solchen Elementen so ähnlich wie möglich gemacht, wie die Arbeit mit
input , über die wir das letzte Mal gesprochen haben. In React schließt sich das
textarea Tag nämlich selbst. Das heißt, der Code zum Anzeigen des Felds auf der Seite kann wie folgt geändert werden:
<textarea />
Sie können das
value Attribut in diesem Tag verwenden. Darüber hinaus wird die Arbeit damit genauso ausgeführt wie mit demselben Attribut gewöhnlicher Textfelder. Aufgrund dessen wird eine einheitliche Arbeit mit verschiedenen Elementen erreicht, und außerdem ist es einfacher, den Inhalt der Felder zu aktualisieren, indem die mit solchen Feldern verbundenen Statuseigenschaften aktualisiert werden. Lassen Sie uns den Status des Feldcodes in dieses Formular bringen:
<textarea value={"Some default value"}/>
Dadurch wird der angegebene Text im Feld angezeigt, wenn er auf der Seite angezeigt wird.
Der Text, der im Feld angezeigt wirdWir werden wieder mit dem Feld für die Eingabe von mehrzeiligem Text arbeiten, aber im Moment werden wir über Flags sprechen. Ein Kontrollkästchen ist ein
input , dessen Typ das Kontrollkästchen ist. Hier ist seine Beschreibung:
<input type="checkbox" />
So sieht die durch dieses Markup beschriebene Flagge auf der Seite aus.
KontrollkästchenDas Hauptmerkmal dieses Steuerelements ist die Tatsache, dass das
value Attribut bei der Arbeit damit nicht verwendet wird. Es wird verwendet, um dem Benutzer zwei Optionen zur Auswahl zu stellen, von denen eine dem Kontrollkästchen und die andere dem nicht aktivierten Kontrollkästchen entspricht. Um zu verfolgen, ob das Kontrollkästchen aktiviert oder deaktiviert ist, wird das
checked Attribut verwendet, das durch einen logischen Wert beschrieben wird. Infolgedessen entsprechen die Flags normalerweise den im Status gespeicherten logischen Eigenschaften.
Lassen Sie uns den Status der Komponente in dieses Formular bringen:
this.state = { firstName: "", lastName: "", isFriendly: true }
Der Flag-Beschreibungscode wird wie folgt geändert:
<input type="checkbox" checked={this.state.isFriendly} />
Danach wird das ausgewählte Kontrollkästchen auf der Seite angezeigt.
Aktiviertes KontrollkästchenEs stimmt, jetzt wird er nicht auf Klicks auf ihn reagieren. Tatsache ist, dass das Flag an die entsprechende im Status gespeicherte Variable gebunden ist. Wenn wir in unserem Fall versuchen, es zu entfernen, lässt Reagieren, Überprüfen des Status und Feststellen, dass die Eigenschaft
isFriendly auf
true , dies nicht zu. Gleichzeitig wird in der Konsole eine Warnung angezeigt, die besagt, dass wir keinen Mechanismus zum Ändern des Felds (
onChange Ereignishandler)
onChange und dass es schreibgeschützt angezeigt wurde.
KonsolenwarnungWir schreiben vielleicht eine spezielle Methode für die Arbeit mit dem Flag, aber der Code unserer Komponente hat bereits die
handleChange() -Methode. Jetzt wird es verwendet, um mit Textfeldern zu arbeiten. Wir werden darüber nachdenken, wie wir damit mit der Flagge arbeiten können.
onChange Sie dazu zuerst die obige Methode als
onChange Ereignishandler
onChange Flags zu und weisen Sie dem Flag einen Namen zu, der dem Namen der
onChange entspricht, die sich auf das Flag bezieht. Zusätzlich werden wir die Flagge mit dem
label Tag signieren:
<label> <input type="checkbox" name="isFriendly" checked={this.state.isFriendly} onChange={this.handleChange} /> Is friendly? </label>
In der
handleChange() -Methode, deren Code unten gezeigt wird, haben wir bei der Arbeit mit Textfeldern den Namen des Elements (
name ) und seinen Inhalt (
value ) herausgefunden.
handleChange() wir den Status aktualisiert, indem wir darauf geschrieben haben, in welchem Feld sich ein bestimmter Name befindet sein Wertattribut:
handleChange(event) { const {name, value} = event.target this.setState({ [name]: value }) }
Jetzt müssen wir herausfinden, wie wir mit einem Flag umgehen sollen, das kein
value hat. Es hat nur das
checked Attribut, das nur
true oder
false Werte akzeptieren kann. Um mit der Methode
handleChange() mit einem Flag arbeiten zu können, müssen wir daher prüfen, ob das Element, für das dieser Handler aufgerufen wird, ein Flag ist. Um diese Prüfung durchzuführen, erinnern wir uns, dass der Typ (
type ) des
input , das das Flag darstellt, auf das
checkbox . Um diesen Wert zu überprüfen, können Sie auf die
type Eigenschaft des Elements
event.target . Wir werden diese Eigenschaft aus
event.target sowie die
checked Eigenschaft mithilfe der folgenden Konstruktion extrahieren:
const {name, value, type, checked} = event.target
Jetzt können wir den Wert der Typkonstante überprüfen und herausfinden, ob das Element, für das der Ereignishandler aufgerufen wird, ein Flag ist. Wenn dies der Fall ist, schreiben wir in den Zustand, der sich als in der
checked Konstante herausstellte. Vergessen Sie nicht, den Code zu speichern, der für die Arbeit mit Textfeldern verantwortlich ist. Infolgedessen hat der
handleChange() Code die folgende Form:
handleChange(event) { const {name, value, type, checked} = event.target type === "checkbox" ? this.setState({ [name]: checked }) : this.setState({ [name]: value }) }
Überprüfen Sie danach die Funktion des Flags.
Überprüfen der Funktion der FlaggeWie Sie sehen, kann es jetzt entfernt und installiert werden. Gleichzeitig wird die Arbeit von Textfeldern nicht unterbrochen. Eine Benachrichtigung bezüglich des Kontrollkästchens ist von der Konsole verschwunden, dort wird jedoch eine Benachrichtigung bezüglich des Felds zur Eingabe von mehrzeiligem Text angezeigt. Ändern Sie den Code, der dieses Feld beschreibt, wie folgt:
<textarea value={"Some default value"} onChange={this.handleChange} />
Dies führt zum Verschwinden der Benachrichtigung, obwohl wir keine anderen Mechanismen für die Arbeit mit diesem Feld mithilfe der Tools der Komponente implementiert haben (keinen Namen für das Feld angegeben, dem Status keine entsprechende Eigenschaft hinzugefügt). Sie können diese Funktionen selbst implementieren. Lassen Sie uns nun über Schalter sprechen.
Sie können als Kombination von
input des
text und
checkbox werden. Hier ist gemeint, dass die Schalter sowohl ein Wertattribut als auch ein
checked Attribut haben. Fügen Sie unserem Formular einige Schalter hinzu und erstellen Sie deren Code basierend auf dem Flag-Beschreibungscode. So sieht es aus:
<label> <input type="radio" name="gender" value="male" checked={this.state.isFriendly} onChange={this.handleChange} /> Male </label> <br /> <label> <input type="radio" name="gender" value="female" checked={this.state.isFriendly} onChange={this.handleChange} /> Female </label>
Wir haben diesen Code basierend auf dem Flag-Beschreibungscode erstellt und noch nichts bearbeitet. Daher verhalten sich die Schalter seltsam. Insbesondere wenn das Kontrollkästchen deaktiviert ist, befinden sich beide Schalter im Status "Aus". Wenn Sie das Kontrollkästchen aktivieren, wird einer von ihnen als "Ein" eingestuft. Solche Fehler können verhindert werden, indem der Elementcode sorgfältig behandelt wird, wenn er auf der Grundlage des Codes vorhandener Elemente erstellt wird. Jetzt werden wir es beheben.
Bitte beachten Sie, dass diese beiden Elemente denselben Namen haben -
gender . Gleichnamige Switches bilden eine Gruppe. Es kann nur ein Schalter ausgewählt werden, der zu einer solchen Gruppe gehört.
Bei der Konfiguration der Switches können Sie nicht einfach angeben, dass der
checked Wert beispielsweise auf
true gesetzt ist, wenn eine Statuseigenschaft
true . Switches müssen synchronisierte Änderungen innerhalb der Gruppe in ihrem eigenen Status unterstützen. Stattdessen wird der
checked Wert der Schalter durch die Bedingung festgelegt. In unserem Fall wird diese Bedingung durch Vergleichen der state-Eigenschaft von
this.state.gender mit der Zeichenfolge
male oder
female . Im Switch-Beschreibungscode sieht es so aus:
<label> <input type="radio" name="gender" value="male" checked={this.state.gender === "male"} onChange={this.handleChange} /> Male </label> <br /> <label> <input type="radio" name="gender" value="female" checked={this.state.gender === "female"} onChange={this.handleChange} /> Female </label>
Fügen Sie nun dem Status eine neue Eigenschaft,
gender , hinzu und initialisieren Sie sie mit einer leeren Zeichenfolge:
this.state = { firstName: "", lastName: "", isFriendly: false, gender: "" }
Danach funktionieren die Schalter unabhängig vom Kontrollkästchen. Fügen Sie dem von der Komponente ausgegebenen Code einen Header der zweiten Ebene hinzu, der Informationen darüber anzeigt, welcher Schalter ausgewählt ist:
<h2><font color="#3AC1EF">You are a {this.state.gender}</font></h2>
Hier lohnt es sich wahrscheinlich, einen Mechanismus für das bedingte Rendern einzuführen. Auf diese Weise können Sie beim Öffnen der Seite, wenn keines der Optionsfelder ausgewählt ist, sicherstellen, dass der Text, den
You are a , nicht darauf angezeigt wird. Wir werden dies jedoch nicht tun, obwohl Sie ihn selbst implementieren können. Schauen wir uns jetzt an, was wir haben.
Schaltet die Anwendungsseite einAlles, worüber wir hier gesprochen haben, mag ziemlich kompliziert erscheinen. Dies betrifft insbesondere das Speichern der Merkmale verschiedener Steuerelemente. Um die Arbeit mit Formularen zu vereinfachen, können Sie spezielle Bibliotheken verwenden. Zum Beispiel die
formik Bibliothek. Diese Bibliothek vereinfacht das Entwickeln von Formularen in React-Anwendungen erheblich.
Lassen Sie uns nun über Listenfelder sprechen.
In normalem HTML werden die folgenden Konstrukte verwendet, um Kombinationsfelder zu beschreiben:
<select> <option></option> <option></option> <option></option> <select/>
React verfolgt einen ähnlichen Ansatz, obwohl wie bei anderen Elementen das
value Attribut verwendet wird. Auf diese Weise können Sie leicht herausfinden, welches Listenelement ausgewählt ist, und außerdem können Sie leichter mit dem Status der Komponente arbeiten.
Angenommen, wir möchten ein Kombinationsfeld erstellen, in dem der Benutzer seine Lieblingsfarbe auswählen kann. Dazu können Sie das folgende Konstrukt in das
value Attribut des
select Elements
value={this.state.favColor} :
value={this.state.favColor} . Dadurch werden die vom Benutzer ausgewählten Werte abgerufen.
favColor nun
favColor zum Status hinzu:
this.state = { firstName: "", lastName: "", isFriendly: false, gender: "", favColor: "blue" }
Als Nächstes statten wir das Kombinationsfeld mit dem
onChange Ereignishandler aus und geben ihm einen Namen. Wir weisen den
options des Kombinationsfelds auch Werte zu und geben den Text ein, der im Feld angezeigt wird.
So sieht ein
select Signaturauswahlelement mit einer Signatur aus:
<label>Favorite Color:</label> <select value={this.state.favColor} onChange={this.handleChange} name="favColor" > <option value="blue">Blue</option> <option value="green">Green</option> <option value="red">Red</option> <option value="orange">Orange</option> <option value="yellow">Yellow</option> </select>
Fügen Sie nun dem Formular eine weitere Beschriftung hinzu, in der die Lieblingsfarbe des Benutzers angezeigt wird:
<h2><font color="#3AC1EF">Your favorite color is {this.state.favColor}</font></h2>
Es ist Zeit, das Kombinationsfeld auszuprobieren.
KombinationsfeldWie Sie sehen können, funktionieren die darauf platzierten Steuerelemente wie erwartet, obwohl unsere Form nicht mit der Raffinesse des Designs glänzt.
Dank der Organisation der React-Steuerelemente in React ist es einfach, denselben Handler für die Verarbeitung ihrer Ereignisse zu verwenden. Dies ist genau das in unserem Fall verwendete Arbeitsschema. Das einzige Merkmal unseres
handleChange() ist, dass wir Flag-Ereignisse auf besondere Weise behandeln müssen.
Lassen Sie uns nun über das Senden des Formulars oder das Verarbeiten der darin eingegebenen Werte nach Abschluss des Formulars sprechen. Es gibt zwei Ansätze, um solche Aktionen auszuführen. Wenn Sie eines davon verwenden, sollte das Formular mit einer Schaltfläche ausgestattet sein:
<button>Submit</button>
Wenn in HTML5 ein
button im Formular gefunden wird, verhält es sich wie ein altes
input vom Typ
submit . Wenn Sie auf diese Schaltfläche klicken, wird ein Ereignis des
onSubmit Formulars selbst ausgelöst. Wenn Sie nach dem Ausfüllen des Formulars etwas tun müssen, können Sie den
onClick Ereignishandler zur Schaltfläche hinzufügen. Ich persönlich bevorzuge es jedoch, solche Ereignisse auf Formularebene zu behandeln, indem
onSubmit ihm den
onSubmit Ereignishandler
onSubmit :
<form onSubmit={this.handleSubmit}>
Die als Handler für dieses Ereignis verwendete Methode wurde noch nicht geschrieben. Dies ist ein regulärer Ereignishandler, der beispielsweise unter Bezugnahme auf eine bestimmte API Formulardaten an diese übergibt.
Zusammenfassung
In dieser Lektion schließen wir unseren Vortrag über die Arbeit mit Formularen in React ab. Das nächste Mal finden Sie praktische Arbeit zu diesem Thema.
Liebe Leser! Wenn Sie versucht haben, mithilfe der formik-Bibliothek Formulare in React zu erstellen, teilen Sie uns dies bitte mit.
