Das Arbeiten mit Formularen und Formularelementen bei der Entwicklung mit React kann komplex sein, da sich HTML-Formularelemente in React etwas anders verhalten als andere DOM-Elemente.
Erfahren Sie, wie Sie mit Formularen und Formularelementen wie Kontrollkästchen, Textfeldern und einzeiligen Texteingaben arbeiten.
Eingabefelder in Formularen verwalten
In React wird die Verwaltung eines Eingabefelds in einem Formular oft dadurch erreicht, dass ein Zustand erstellt und an das Eingabefeld gebunden wird.
Zum Beispiel:
FunktionApp() {const [firstName, setFirstName] = React.useState('');
FunktionhandleFirstNameChange(Fall) {
setFirstName( Fall.Ziel.Wert )
}
zurückkehren (
<form>
<Eingabetyp='Text' Platzhalter='Vorname' onInput={handleFirstNameChange} />
</form>
)
}
Oben haben wir eine Vorname Zustand, ein onInput Ereignis und ein handleChange
Handler. Der handleChange Funktion wird bei jedem Tastendruck ausgeführt, um die zu aktualisieren Vorname Zustand.Dieser Ansatz kann ideal sein, wenn Sie mit einem Eingabefeld arbeiten, aber unterschiedliche Zustände und Zustände erzeugen Handler-Funktionen für jedes Eingabeelement würden sich wiederholen, wenn mit mehreren Eingaben gearbeitet würde Felder.
Um in solchen Situationen das Schreiben von sich wiederholendem und redundantem Code zu vermeiden, geben Sie jedem Eingabefeld einen eindeutigen Namen und legen Sie ein Objekt fest als anfänglichen Statuswert Ihres Formulars und füllen Sie das Objekt dann mit Eigenschaften mit denselben Namen wie die Eingabe Felder.
Zum Beispiel:
FunktionApp() {konst [formData, setFormData] = React.useState(
{
Vorname: '',
Familienname, Nachname: ''
}
);
zurückkehren (
<form>
<Eingabetyp='Text' Platzhalter='Vorname' name='Vorname' />
<Eingabetyp='Text' Platzhalter='Familienname, Nachname' name='Familienname, Nachname' />
</form>
)
}
Der Formulardaten dient als Zustandsvariable zum Verwalten und Aktualisieren aller Eingabefelder innerhalb des Formulars. Stellen Sie sicher, dass die Namen der Eigenschaften im Zustandsobjekt mit den Namen der Eingabeelemente identisch sind.
Um den Zustand mit den Eingabedaten zu aktualisieren, fügen Sie eine hinzu onInput Event-Listener für das Eingabeelement, und rufen Sie dann Ihre erstellte Handler-Funktion auf.
Zum Beispiel:
FunktionApp() {konst [formData, setFormData] = React.useState(
{
Vorname: '',
Familienname, Nachname: ''
}
);
FunktionhandleChange(Fall) {
setFormData( (prevState) => {
zurückkehren {
...prevState,
[ereignis.ziel.name]: Fall.Ziel.Wert
}
})
}
zurückkehren (
<form>
<Eingang
Typ='Text'
Platzhalter='Vorname'
name='Vorname'
onInput={handleChange}
/>
<Eingang
Typ='Text'
Platzhalter='Familienname, Nachname'
name='Familienname, Nachname'
onInput={handleChange}
/>
</form>
)
}
Der obige Codeblock verwendete an onInput Event und eine Handler-Funktion, handleFirstNameChange. Das handleFirstNameChange Die Funktion aktualisiert die Zustandseigenschaften, wenn sie aufgerufen wird. Die Werte der Zustandseigenschaften sind die gleichen wie die ihrer entsprechenden Eingabeelemente.
Umwandlung Ihrer Eingaben in gesteuerte Komponenten
Wenn ein HTML-Formular gesendet wird, navigiert es standardmäßig zu einer neuen Seite im Browser. Dieses Verhalten ist in einigen Situationen unpraktisch, z. B. wenn Sie möchten Validierung der in ein Formular eingegebenen Daten. In den meisten Fällen finden Sie es geeigneter, eine JavaScript-Funktion mit Zugriff auf die in das Formular eingegebenen Informationen zu haben. Dies kann in React einfach mit kontrollierten Komponenten erreicht werden.
Mit index.html-Dateien behalten Formularelemente ihren Zustand im Auge und ändern ihn als Reaktion auf die Eingabe eines Benutzers. Bei React ändert die set state-Funktion einen dynamischen Zustand, der in der state-Eigenschaft der Komponente gespeichert ist. Sie können die beiden Zustände kombinieren, indem Sie den React-Zustand zur Single Source of Truth machen. Auf diese Weise steuert die Komponente, die ein Formular erstellt, was passiert, wenn ein Benutzer Daten eingibt. Eingabeformularelemente mit Werten, die React steuert, werden kontrollierte Komponenten oder kontrollierte Eingaben genannt.
Um kontrollierte Eingaben in Ihrer React-Anwendung zu verwenden, fügen Sie Ihrem Eingabeelement eine Wert-Prop hinzu:
FunktionApp() {konst [formData, setFormData] = React.useState(
{
Vorname: '',
Familienname, Nachname: ''
}
);
FunktionhandleChange(Fall) {
setFormData( (prevState) => {
zurückkehren {
...prevState,
[ereignis.ziel.name]: Fall.Ziel.Wert
}
})
}
zurückkehren (
<form>
<Eingang
Typ='Text'
Platzhalter='Vorname'
name='Vorname'
onInput={handleChange}
value={formData.firstName}
/>
<Eingang
Typ='Text'
Platzhalter='Familienname, Nachname'
name='Familienname, Nachname'
onInput={handleChange}
value={formData.lastName}
/>
</form>
)
}
Die Wertattribute der Eingabeelemente werden nun auf den Wert der entsprechenden Zustandseigenschaften gesetzt. Der Wert des Eingangs wird bei Verwendung einer gesteuerten Komponente immer durch den Zustand bestimmt.
Umgang mit dem Textarea-Eingabeelement
Der Textbereich -Element ist wie jedes normale Eingabeelement, enthält jedoch mehrzeilige Eingaben. Es ist nützlich, wenn Informationen weitergegeben werden, die mehr als eine einzelne Zeile erfordern.
In einer index.html-Datei wird die textarea-Tag -Element bestimmt seinen Wert durch seine untergeordneten Elemente, wie im folgenden Codeblock zu sehen:
<Textbereich>
Hallo, wie geht's dir?
</textarea>
Mit React, um die zu verwenden Textbereich -Element können Sie ein Eingabeelement mit dem Typ erstellen Textbereich.
So:
FunktionApp() {zurückkehren (
<form>
<Eingabetyp='Textbereich' name='Nachricht'/>
</form>
)
}
Eine Alternative zur Verwendung Textbereich Als Eingabetyp ist die zu verwenden Textbereich Element-Tag anstelle des Eingangstyp-Tags, wie unten zu sehen:
FunktionApp() {zurückkehren (
<form>
<Textbereich
name='Nachricht'
Wert='Hallo, wie geht's dir?'
/>
</form>
)
}
Der Textbereich -Tag hat ein Wertattribut, das die Informationen des Benutzers enthält, die in eingegeben wurden Textbereich Element. Dadurch funktioniert es wie ein standardmäßiges React-Eingabeelement.
Arbeiten mit dem Checkbox-Eingabeelement von React
Etwas anders sieht es bei der Arbeit mit aus Kontrollkästchen Eingänge. Das Eingabefeld vom Typ Kontrollkästchen hat kein value-Attribut. Allerdings hat es eine geprüft Attribut. Das geprüft -Attribut unterscheidet sich von einem Wertattribut dadurch, dass ein boolescher Wert erforderlich ist, um zu bestimmen, ob das Kontrollkästchen aktiviert oder nicht aktiviert ist.
Zum Beispiel:
FunktionApp() {zurückkehren (
<form>
<Eingabetyp='Kontrollkästchen' id='beitreten' name='verbinden' />
<Bezeichnung htmlFor='beitreten'>Möchten Sie unserem Team beitreten?</label>
</form>
)
}
Das Label-Element bezieht sich auf die ID des Eingabeelements mit dem htmlFür Attribut. Das htmlFür -Attribut übernimmt die ID des Eingabeelements – in diesem Fall beitreten. Wenn Erstellen eines HTML-Formulars, Die htmlFür Attribut repräsentiert die für Attribut.
Der Kontrollkästchen wird besser als kontrollierter Eingang verwendet. Sie können dies erreichen, indem Sie einen Zustand erstellen und ihm den anfänglichen booleschen Wert „true“ oder „false“ zuweisen.
Sie sollten zwei Requisiten auf dem einschließen Kontrollkästchen Eingabeelement: a geprüft Eigentum und ein bei Änderung Ereignis mit einer Handler-Funktion, die den Wert des Zustands mithilfe von bestimmt setIsChecked() Funktion.
Zum Beispiel:
FunktionApp() {konst [isChecked, setIsChecked] = React.useState(FALSCH);
FunktionhandleChange() {
setIsChecked( (prevState) => !prevState )
}
zurückkehren (
<form>
<Eingang
Typ='Kontrollkästchen'
id='beitreten'
name='verbinden'
geprüft={istGeprüft}
onChange={handleChange}
/>
<Bezeichnung htmlFor='beitreten'>Möchten Sie unserem Team beitreten?</label>
</form>
)
}
Dieser Codeblock generiert eine wird geprüft Zustand und setzt seinen Anfangswert auf FALSCH. Es setzt den Wert von wird geprüft zum geprüft -Attribut im Eingabeelement. Der handleChange Die Funktion wird ausgelöst und ändert den Zustandswert von wird geprüft ins Gegenteil, wenn Sie auf das Kontrollkästchen klicken.
Ein Formularelement kann wahrscheinlich mehrere Eingabeelemente unterschiedlichen Typs enthalten, z. B. Kontrollkästchen, Text usw.
In solchen Fällen können Sie sie ähnlich behandeln wie mehrere Eingabeelemente desselben Typs.
Hier ist ein Beispiel:
FunktionApp() {lassen[formData, setFormData] = React.useState(
{
Vorname: ''
verbinden: WAHR,
}
);
FunktionhandleChange(Fall) {
konst {Name, Wert, Typ, überprüft} = event.target;
setFormData( (prevState) => {
zurückkehren {
...prevState,
[Name]: Typ Kontrollkästchen? überprüft: wert
}
})
}
zurückkehren (
<form>
<Eingang
Typ='Text'
Platzhalter='Vorname'
name='Vorname'
onInput={handleChange}
value={formData.firstName}
/>
<Eingang
Typ='Kontrollkästchen'
id='beitreten'
name='verbinden'
geprüft={formData.join}
onChange={handleChange}
/>
<Bezeichnung htmlFor='beitreten'>Möchten Sie unserem Team beitreten?</label>
</form>
)
}
Beachten Sie, dass in der handleChange Funktion, setFormData verwendet einen ternären Operator, um den Wert von zuzuweisen geprüft -Eigenschaft zu den Zustandseigenschaften hinzu, wenn der Zieleingabetyp a ist Kontrollkästchen. Wenn nicht, weist es die Werte von zu Wert Attribut.
Jetzt können Sie mit Reaktionsformularen umgehen
Hier haben Sie gelernt, wie Sie mit Formularen in React mithilfe verschiedener Formulareingabeelemente arbeiten. Sie haben auch gelernt, wie Sie kontrollierte Eingaben auf Ihre Formularelemente anwenden, indem Sie bei der Arbeit mit Kontrollkästchen eine Wert-Prop oder eine Aktiviert-Prop hinzufügen.
Eine effiziente Handhabung der Eingabeelemente von React-Formularen verbessert die Leistung Ihrer React-Anwendung, was zu einer rundum besseren Benutzererfahrung führt.