ReactJS - Formular-Programmierung

Hallo, ambitionierte Programmierer! Heute tauchen wir in die aufregende Welt der Formularprogrammierung in ReactJS ein. Als dein freundlicher Nachbarschaftsinformatiklehrer bin ich hier, um dich auf dieser Reise Schritt für Schritt zu führen. Also hole dir einen Kaffee (oder dein Lieblingsgetränk) und los geht's!

Was sind Formulare in ReactJS?

Bevor wir uns dem Code widmen, lassen wir uns anschauen, was Formulare sind und warum sie wichtig sind. Formulare sind wie die Torwächter der Benutzereingaben in Webanwendungen. Sie ermöglichen es den Benutzern, mit unserer App zu interagieren, indem sie Informationen bereitstellen, die wir dann verarbeiten und nutzen können. In React sind Formulare etwas Besonderes, weil sie ihren eigenen Zustand bewahren. Das bedeutet, wir müssen sie etwas anders behandeln als andere Elemente.

Die Grundlagen der Formularverarbeitung

Lassen Sie uns mit einem einfachen Formularbeispiel beginnen:

import React, { useState } from 'react';

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

const handleSubmit = (event) => {
event.preventDefault();
alert('Ein Name wurde übermittelt: ' + name);
}

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

Lassen wir das auseinanderbrechen:

1. Wir importieren useState von React, um unseren Formularzustand zu verwalten.
2. Wir erstellen eine Zustandsvariable name und eine Funktion setName, um sie zu aktualisieren.
3. Die Funktion handleSubmit verhindert die Standardformularübersendung und zeigt eine Alertbox mit dem übermittelten Namen an.
4. Im Formular setzen wir den value des Eingabefelds auf unseren name-Zustand und verwenden onChange, um den Zustand zu aktualisieren, wenn der Eingabeinhalt sich ändert.

Dies ist das Kernstück der Formularverarbeitung in React. Wir steuern den Zustand des Formulars mit React, weshalb wir dies eine "kontrollierte Komponente" nennen.

Umgang mit mehreren Eingaben

Was ist, wenn wir mehrere Eingaben haben? Müssten wir für jede eine separate Zustandsvariable erstellen? Nicht unbedingt! Lassen Sie uns ein komplexeres Formular anschauen:

import React, { useState } from 'react';

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

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

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

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

In diesem Beispiel verwenden wir ein einzelnes Zustandsobjekt, um alle unsere Formularfelder zu verwalten. Die Funktion handleChange nutzt das name-Attribut der Eingabe, um das richtige Feld in unserem Zustand zu aktualisieren. Diese Methode skaliert gut, wenn Ihre Formulare größer werden.

Umgang mit verschiedenen Eingabetypen

Formulare sind nicht nur Texteingaben. Lassen Sie uns anschauen, wie wir verschiedene Eingabetypen behandeln können:

import React, { useState } from 'react';

function DiverseForm() {
const [formData, setFormData] = useState({
name: '',
age: '',
gender: '',
isStudent: false,
favoriteColor: 'blue'
});

const handleChange = (event) => {
const { name, value, type, checked } = event.target;
setFormData(prevState => ({
...prevState,
[name]: type === 'checkbox' ? checked : value
}));
}

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

return (
<form onSubmit={handleSubmit}>
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
placeholder="Name"
/>
<input
type="number"
name="age"
value={formData.age}
onChange={handleChange}
placeholder="Alter"
/>
<select name="gender" value={formData.gender} onChange={handleChange}>
<option value="">Geschlecht auswählen</option>
<option value="male">Männlich</option>
<option value="female">Weiblich</option>
<option value="other">Divers</option>
</select>
<label>
<input
type="checkbox"
name="isStudent"
checked={formData.isStudent}
onChange={handleChange}
/>
Bist du ein Student?
</label>
<fieldset>
<legend>Lieblingsfarbe</legend>
<label>
<input
type="radio"
name="favoriteColor"
value="red"
checked={formData.favoriteColor === 'red'}
onChange={handleChange}
/>
Rot
</label>
<label>
<input
type="radio"
name="favoriteColor"
value="blue"
checked={formData.favoriteColor === 'blue'}
onChange={handleChange}
/>
Blau
</label>
<label>
<input
type="radio"
name="favoriteColor"
value="green"
checked={formData.favoriteColor === 'green'}
onChange={handleChange}
/>
Grün
</label>
</fieldset>
<button type="submit">Absenden</button>
</form>
);
}

Dieses Formular zeigt, wie man verschiedene Eingabetypen behandelt: Text, Nummer, Auswahlliste, Checkbox und Radiobuttons. Der Schlüssel liegt in der Funktion handleChange, die den Eingabetyp überprüft und den Zustand entsprechend aktualisiert.

Formularvalidierung

Kein Formular ist vollständig ohne Validierung. Lassen Sie uns einige grundlegende Validierungen zu unserem Formular hinzufügen:

import React, { useState } from 'react';

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

const [errors, setErrors] = useState({});

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

const validateForm = () => {
let newErrors = {};
if (!formData.username) newErrors.username = 'Benutzername ist erforderlich';
if (!formData.email) {
newErrors.email = 'E-Mail ist erforderlich';
} else if (!/\S+@\S+\.\S+/.test(formData.email)) {
newErrors.email = 'E-Mail ist ungültig';
}
if (!formData.password) {
newErrors.password = 'Passwort ist erforderlich';
} else if (formData.password.length < 6) {
newErrors.password = 'Passwort muss mindestens 6 Zeichen lang sein';
}
return newErrors;
}

const handleSubmit = (event) => {
event.preventDefault();
const newErrors = validateForm();
if (Object.keys(newErrors).length > 0) {
setErrors(newErrors);
} else {
console.log('Formular übermittelt:', formData);
// Hier würden Sie normalerweise die Daten an einen Server senden
}
}

return (
<form onSubmit={handleSubmit}>
<div>
<input
type="text"
name="username"
value={formData.username}
onChange={handleChange}
placeholder="Benutzername"
/>
{errors.username && <span className="error">{errors.username}</span>}
</div>
<div>
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
placeholder="E-Mail"
/>
{errors.email && <span className="error">{errors.email}</span>}
</div>
<div>
<input
type="password"
name="password"
value={formData.password}
onChange={handleChange}
placeholder="Passwort"
/>
{errors.password && <span className="error">{errors.password}</span>}
</div>
<button type="submit">Absenden</button>
</form>
);
}

In diesem Beispiel haben wir eine Funktion validateForm hinzugefügt, die nach leeren Feldern und validiert die E-Mail-Format und Passwortlänge. Wir speichern jegliche Fehler in einem separaten Zustandsobjekt und显示 sie unter den entsprechenden Eingabefeldern.

Fazit

Und das war's! Wir haben die Grundlagen der Formularverarbeitung in React abgedeckt, von einfachen Texteingaben bis hin zu komplexeren Formularen mit verschiedenen Eingabetypen und Validierung. Denken Sie daran, Übung macht den Meister. Versuchen Sie, eigene Formulare zu erstellen, experimentieren Sie mit verschiedenen Eingabetypen und fürchten Sie sich nicht vor Fehlern - das ist, wie wir lernen!

Hier ist eine kurze Referenztabelle der von uns verwendeten Methoden:

Methode	Zweck
useState	Zum Erstellen und Verwalten von Zuständen in funktionalen Komponenten
onChange	Zum Behandeln von Änderungen in Formulareingaben
onSubmit	Zum Behandeln von Formularübersendungen
preventDefault	Zum Verhindern des Standardverhaltens von Formularübersendungen

Frohes Coden und möge eure Formulare immer benutzerfreundlich und bugfrei sein!

Credits: Image by storyset