ReactJS - Formular Komponenten

Hallo da draußen, angehende Entwickler! Heute tauchen wir ein in die aufregende Welt der React-FormularKomponenten. Als dein freundlicherNachbarchaftsinformatiklehrer bin ich hier, um dich auf dieser Reise Schritt für Schritt zu führen. Also hol dir dein Lieblingsgetränk, setze dich bequem hin und lassen wir gemeinsam dieses Coding-Abenteuer starten!

ReactJS - Form Components

Was ist eine FormularKomponente?

Bevor wir uns den Details von React-FormularKomponenten zuwenden, lassen wir uns einen Moment Zeit nehmen, um zu verstehen, was sie sind und warum sie so wichtig sind.

Definition

Eine FormularKomponente in React ist eine spezialisierte Komponente, die darauf ausgelegt ist, Benutzereingaben und Dateneingaben zu verwalten. Es ist wie eine digitale Version der Papierformulare, die du im Arztzimmer ausfüllst, aber viel cooler und interaktiver!

Bedeutung

FormularKomponenten sind entscheidend in der Webentwicklung, da sie als Hauptmedium zur Sammlung von Informationen von Benutzern dienen. Ob es sich um ein einfaches Anmeldeformular oder eine komplexe Umfrage handelt, FormularKomponenten ermöglichen es Benutzern, mit deiner Anwendung zu interagieren und wertvolle Daten bereitzustellen.

Anwendung von FormularKomponenten

Nun, da wir verstehen, was FormularKomponenten sind, lassen uns die Ärmel hochkrempeln und lernen, wie man sie in React erstellt und verwendet.

Grundstruktur eines Formulars

Lassen wir mit einem einfachen Beispiel einer FormularKomponente beginnen:

import React, { useState } from 'react';

function SimpleForm() {
const [name, setName] = useState('');

const handleSubmit = (event) => {
event.preventDefault();
alert(`Hallo, ${name}!`);
};

return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
<button type="submit">Absenden</button>
</form>
);
}

Lassen wir das auseinanderbrechen:

Wir importieren useState von React, um den Zustand unseres Formulars zu verwalten.
Wir erstellen eine funktionale Komponente namens SimpleForm.
Innerhalb der Komponente verwenden wir useState, um eine Zustandsvariablen name und ihre Setterfunktion setName zu erstellen.
Wir definieren eine handleSubmit-Funktion, die das Standardformularsubmit-Verhalten verhindert und eine Alert mit dem eingegebenen Namen anzeigt.
In der Return-Anweisung rendern wir ein Formular mit einem Eingabefeld für den Namen und einem Submit-Button.
Der Wert des Eingabefelds wird vom name-Zustand kontrolliert, und sein onChange- Ereignis aktualisiert den Zustand, während der Benutzer_tippt.

Verwaltung mehrerer Eingaben

Nun verbessern wir uns und erstellen ein Formular mit mehreren Eingaben:

import React, { useState } from 'react';

function MultiInputForm() {
const [formData, setFormData] = useState({
firstName: '',
lastName: '',
email: ''
});

const handleChange = (event) => {
const { name, value } = event.target;
setFormData(prevData => ({
...prevData,
[name]: value
}));
};

const handleSubmit = (event) => {
event.preventDefault();
console.log('Formular submitted:', formData);
};

return (
<form onSubmit={handleSubmit}>
<label>
Vorname:
<input
type="text"
name="firstName"
value={formData.firstName}
onChange={handleChange}
/>
</label>
<label>
Nachname:
<input
type="text"
name="lastName"
value={formData.lastName}
onChange={handleChange}
/>
</label>
<label>
E-Mail:
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
/>
</label>
<button type="submit">Absenden</button>
</form>
);
}

In diesem Beispiel:

Wir verwenden eine einzelne Zustandsobjekt formData, um alle Formularfelder zu speichern.
Die handleChange-Funktion verwendet das name-Attribut der Eingabe, um das richtige Feld im Zustand zu aktualisieren.
Wir verwenden den Spread-Operator (...prevData), um den bestehenden Zustand zu kopieren, bevor wir ihn aktualisieren.

Formularvalidierung

Kein Formular ist vollständig ohne Validierung! Lassen wir einige grundlegende Validierung zu unserem Formular hinzufügen:

import React, { useState } from 'react';

function ValidatedForm() {
const [formData, setFormData] = useState({
username: '',
password: ''
});
const [errors, setErrors] = useState({});

const handleChange = (event) => {
const { name, value } = event.target;
setFormData(prevData => ({
...prevData,
[name]: value
}));
};

const validate = () => {
let tempErrors = {};
if (!formData.username) tempErrors.username = "Benutzername ist erforderlich";
if (formData.password.length < 6) tempErrors.password = "Passwort muss mindestens 6 Zeichen lang sein";
setErrors(tempErrors);
return Object.keys(tempErrors).length === 0;
};

const handleSubmit = (event) => {
event.preventDefault();
if (validate()) {
console.log('Formular submitted:', formData);
} else {
console.log('Formular enthält Fehler');
}
};

return (
<form onSubmit={handleSubmit}>
<label>
Benutzername:
<input
type="text"
name="username"
value={formData.username}
onChange={handleChange}
/>
{errors.username && <span style={{color: 'red'}}>{errors.username}</span>}
</label>
<label>
Passwort:
<input
type="password"
name="password"
value={formData.password}
onChange={handleChange}
/>
{errors.password && <span style={{color: 'red'}}>{errors.password}</span>}
</label>
<button type="submit">Absenden</button>
</form>
);
}

In diesem Beispiel:

Wir fügen einen neuen Zustand errors hinzu, um Validierungsfehler zu speichern.
Wir erstellen eine validate-Funktion, die überprüft, ob der Benutzername leer ist und das Passwort mindestens 6 Zeichen lang ist.
In handleSubmit gehen wir nur vor, wenn das Formular die Validierung besteht.
Wir显示错误消息在每个输入字段下方，当验证失败时。

Schlussfolgerung

Und das war's, Leute! Wir haben die Welt der React-FormularKomponenten durchquert, von einfachen Eingaben bis hin zu mehrfeldrigen Formularen mit Validierung. Denken Sie daran, Übung macht den Meister, also fürchten Sie sich nicht, diese Konzepte auszuprobieren und Ihre eigenen Formulare zu erstellen.

Als wir schließen, hier ist eine kleine Tabelle, die die wichtigsten Methoden zusammenfasst, die wir in unseren FormularKomponenten verwendet haben:

Methode	Zweck
useState	Verwalten des Formularzustands
onChange	Verwalten von Eingabeänderungen
onSubmit	Verwalten von Formularübersendungen
preventDefault	Verhindern des Standardformularverhaltens

Weiter codieren, bleibe neugierig und erinnere dich daran: In der Welt der Programmierung ist jeder Fehler eine verdeckte Lerngelegenheit. Frohes Reacten!

Credits: Image by storyset

Vorheriges Tutorial:

ReactJS - Symbole