So arbeiten Sie mit Formularelementen in React
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:
function App() {
const [firstName, setFirstName] = React.useState('');
function handleFirstNameChange(event) {
setFirstName(event.target.value)
}
return (
<form>
<input type='text' placeholder='First Name' onInput={handleFirstNameChange} />
</form>
)
}
Oben haben wir einen firstName- Zustand, ein onInput- Ereignis und einen HandleChange- Handler. Die handleChange- Funktion wird bei jedem Tastendruck ausgeführt, um den firstName- Zustand zu aktualisieren.
Dieser Ansatz kann ideal sein, wenn Sie mit einem Eingabefeld arbeiten, aber das Erstellen unterschiedlicher Zustände und Handlerfunktionen für jedes Eingabeelement würde sich wiederholen, wenn Sie mit mehreren Eingabefeldern arbeiten.
Um in solchen Situationen das Schreiben von sich wiederholendem und redundantem Code zu vermeiden, geben Sie jedem Eingabefeld einen eindeutigen Namen, legen Sie ein Objekt als Anfangszustandswert Ihres Formulars fest und füllen Sie das Objekt dann mit Eigenschaften mit denselben Namen wie die Eingabefelder.
Zum Beispiel:
function App() {
const [formData, setFormData] = React.useState(
{
firstName: '',
lastName: ''
}
);
return (
<form>
<input type='text' placeholder='First Name' name='firstName' />
<input type='text' placeholder='Last Name' name='lastName' />
</form>
)
}
formData 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 Status mit den Eingabedaten zu aktualisieren, fügen Sie dem Eingabeelement einen onInput- Ereignis-Listener hinzu und rufen dann Ihre erstellte Handler-Funktion auf.
Zum Beispiel:
function App() {
const [formData, setFormData] = React.useState(
{
firstName: '',
lastName: ''
}
);
function handleChange(event) {
setFormData((prevState) => {
return {
...prevState,
[event.target.name]: event.target.value
}
})
}
return (
<form>
<input
type='text'
placeholder='First Name'
name='firstName'
onInput={handleChange}
/>
<input
type='text'
placeholder='Last Name'
name='lastName'
onInput={handleChange}
/>
</form>
)
}
Der obige Codeblock verwendete ein onInput- Ereignis und eine Handler-Funktion, handleFirstNameChange . Diese handleFirstNameChange -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, beispielsweise wenn Sie die in ein Formular eingegebenen Daten validieren möchten. 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 verfolgen Formularelemente ihren Zustand 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:
function App() {
const [formData, setFormData] = React.useState(
{
firstName: '',
lastName: ''
}
);
function handleChange(event) {
setFormData((prevState) => {
return {
...prevState,
[event.target.name]: event.target.value
}
})
}
return (
<form>
<input
type='text'
placeholder='First Name'
name='firstName'
onInput={handleChange}
value={formData.firstName}
/>
<input
type='text'
placeholder='Last Name'
name='lastName'
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
Das textarea- Element ist wie jedes normale Eingabeelement, enthält aber mehrzeilige Eingaben. Es ist nützlich, wenn Informationen weitergegeben werden, die mehr als eine einzelne Zeile erfordern.
In einer index.html-Datei bestimmt das textarea-Tag- Element seinen Wert durch seine untergeordneten Elemente, wie im folgenden Codeblock zu sehen:
<textarea>
Hello, How are you?
</textarea>
Mit React können Sie zur Verwendung des textarea -Elements ein Eingabeelement vom Typ textarea erstellen .
So:
function App() {
return (
<form>
<input type='textarea' name='message'/>
</form>
)
}
Eine Alternative zur Verwendung von textarea als Eingabetyp ist die Verwendung des Textarea- Element-Tags anstelle des Eingabetyp-Tags, wie unten gezeigt:
function App() {
return (
<form>
<textarea
name='message'
value='Hello, How are you?'
/>
</form>
)
}
Das Textarea- Tag hat ein Wertattribut, das die in das Textarea- Element eingegebenen Informationen des Benutzers enthält. Dadurch funktioniert es wie ein standardmäßiges React-Eingabeelement.
Arbeiten mit dem Checkbox-Eingabeelement von React
Etwas anders sieht es bei der Arbeit mit Kontrollkästchen- Eingaben aus. Das Eingabefeld vom Typ Checkbox hat kein Wertattribut. Es hat jedoch ein aktiviertes Attribut. Dieses aktivierte Attribut unterscheidet sich von einem Wertattribut dadurch, dass ein boolescher Wert erforderlich ist, um zu bestimmen, ob das Kontrollkästchen aktiviert oder deaktiviert ist.
Zum Beispiel:
function App() {
return (
<form>
<input type='checkbox' id='joining' name='join' />
<label htmlFor='joining'>Will you like to join our team?</label>
</form>
)
}
Das Label-Element verweist mit dem htmlFor- Attribut auf die ID des Eingabeelements . Dieses htmlFor- Attribut übernimmt die ID des Eingabeelements – in diesem Fall Joining. Beim Erstellen eines HTML-Formulars repräsentiert das htmlFor- Attribut das for- Attribut.
Die Checkbox wird besser als kontrollierte Eingabe 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 in das Eingabeelement des Kontrollkästchens einfügen: eine Eigenschaft „checked “ und ein Ereignis „onChange“ mit einer Handler-Funktion, die den Wert des Zustands mithilfe der Funktion „setIsChecked()“ bestimmt .
Zum Beispiel:
function App() {
const [isChecked, setIsChecked] = React.useState(false);
function handleChange() {
setIsChecked((prevState) =>! prevState)
}
return (
<form>
<input
type='checkbox'
id='joining'
name='join'
checked={isChecked}
onChange={handleChange}
/>
<label htmlFor='joining'>Will you like to join our team?</label>
</form>
)
}
Dieser Codeblock generiert einen isChecked- Zustand und setzt seinen Anfangswert auf false . Es setzt den Wert von isChecked auf das Attribut „checked“ im Eingabeelement. Die handleChange- Funktion wird ausgelöst und ändert den Statuswert von isChecked in sein 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:
function App() {
let[formData, setFormData] = React.useState(
{
firstName: ''
join: true,
}
);
function handleChange(event) {
const {name, value, type, checked} = event.target;
setFormData((prevState) => {
return {
...prevState,
[name]: type === checkbox? checked: value
}
})
}
return (
<form>
<input
type='text'
placeholder='First Name'
name='firstName'
onInput={handleChange}
value={formData.firstName}
/>
<input
type='checkbox'
id='joining'
name='join'
checked={formData.join}
onChange={handleChange}
/>
<label htmlFor='joining'>Will you like to join our team?</label>
</form>
)
}
Beachten Sie, dass setFormData in der Funktion handleChange einen ternären Operator verwendet, um den Wert der Eigenschaft „checked“ den Zustandseigenschaften zuzuweisen, wenn der Zieleingabetyp ein Kontrollkästchen ist . Wenn nicht, weist es die Werte des Wertattributs zu .
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 beim Arbeiten 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.
Schreibe einen Kommentar