ReactJS - Controlled Components: A Beginner's Guide

Hallo zusammen, zukünftige React-Entwickler! Heute machen wir uns auf eine aufregende Reise in die Welt der Controlled Components in ReactJS. Machen Sie sich keine Sorgen, wenn Sie neu im Programmieren sind – ich werde Ihr freundlicher Guide sein, und wir gehen das Schritt für Schritt durch. Am Ende dieses Tutorials werden Sie Formulare wie ein Profi erstellen können!

Was sind Controlled Components?

Bevor wir eintauchen, beginnen wir mit einer einfachen Analogie. Stellen Sie sich vor, Sie sind in einem schicken Restaurant und möchten eine maßgeschneiderte Pizza bestellen. In dieser Szene sind Sie (das React-Component) der Chef über das, was auf der Pizza (die Formulardaten) landet. Jedes Mal, wenn Sie ein Topping hinzufügen oder entfernen möchten, sagen Sie es dem Kellner (dem Zustand), und er aktualisiert Ihre Bestellung entsprechend. Das ist im Grunde, wie Controlled Components in React funktionieren!

In React-Begriffen ist ein Controlled Component ein Eingabeformular-element, dessen Wert von React kontrolliert wird. Anstatt das DOM die Formulardaten zu verwalten, übernimmt React die Kontrolle.

Warum Controlled Components verwenden?

1. Einheitliche Wahrheitsquelle: Alle Formulardaten werden im Komponentenzustand gespeichert.
2. Sofortiger Zugriff auf Eingaben: Sie können die Eingabewerte sofort abrufen.
3. Mehr Kontrolle: Sie können Eingabedaten leicht manipulieren und validieren.

Nun, lassen Sie uns mit ein wenig Code herumspielen!

Controlled Component mit einzelner Eingabe

Lassen Sie uns mit einem einfachen Beispiel beginnen – ein Texteingabefeld, das den Benutzer begrüßt.

import React, { useState } from 'react';

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

const handleChange = (event) => {
setName(event.target.value);
};

return (
<div>
<input type="text" value={name} onChange={handleChange} />
<p>Hallo, {name}!</p>
</div>
);
}

export default GreetingInput;

Lassen Sie uns das auseinandernehmen:

1. Wir importieren useState von React, um den Zustand unserer Komponente zu verwalten.
2. Wir erstellen eine Zustandsvariable name und ihre Setterfunktion setName.
3. Die handleChange-Funktion aktualisiert den name-Zustand, wenn sich die Eingabe ändert.
4. In der JSX setzen wir den value des Eingabefelds auf name und verknüpfen das onChange- Ereignis mit handleChange.
5. Wir显示 einen Gruß, indem wir den aktuellen Wert von name verwenden.

Dies ist das Wesen einer Controlled Component – React kontrolliert den Wert des Eingabefelds durch den Zustand.

Probieren Sie es selbst aus!

Geben Sie einfach Ihren Namen in das Eingabefeld ein. Beachten Sie, wie die Begrüßung sofort aktualisiert wird? Das ist die Magie der Controlled Components!

Erstellung eines einfachen Formulars

Nun, da wir die Grundlagen kennen, lassen Sie uns ein komplexeres Formular mit mehreren Eingaben erstellen.

import React, { useState } from 'react';

function PizzaOrderForm() {
const [order, setOrder] = useState({
name: '',
size: 'medium',
toppings: []
});

const handleChange = (event) => {
const { name, value, type, checked } = event.target;

if (type === 'checkbox') {
if (checked) {
setOrder(prevOrder => ({
...prevOrder,
toppings: [...prevOrder.toppings, value]
}));
} else {
setOrder(prevOrder => ({
...prevOrder,
toppings: prevOrder.toppings.filter(topping => topping !== value)
}));
}
} else {
setOrder(prevOrder => ({
...prevOrder,
[name]: value
}));
}
};

const handleSubmit = (event) => {
event.preventDefault();
alert(`Bestellung aufgegeben! Name: ${order.name}, Größe: ${order.size}, Toppings: ${order.toppings.join(', ')}`);
};

return (
<form onSubmit={handleSubmit}>
<input
type="text"
name="name"
value={order.name}
onChange={handleChange}
placeholder="Dein Name"
/>
<select name="size" value={order.size} onChange={handleChange}>
<option value="small">Klein</option>
<option value="medium">Mittel</option>
<option value="large">Groß</option>
</select>
<label>
<input
type="checkbox"
name="toppings"
value="käse"
checked={order.toppings.includes('käse')}
onChange={handleChange}
/>
Käse
</label>
<label>
<input
type="checkbox"
name="toppings"
value="pepperoni"
checked={order.toppings.includes('pepperoni')}
onChange={handleChange}
/>
Pepperoni
</label>
<button type="submit">Bestellung aufgeben</button>
</form>
);
}

export default PizzaOrderForm;

Wow, das ist eine Menge Code! Aber keine Sorge, wir werden es Schritt für Schritt durchgehen:

1. Wir erstellen einen Zustandsobjekt order, das alle unsere Formulardaten enthält.
2. Die handleChange-Funktion ist jetzt komplexer. Sie verarbeitet verschiedene Eingabetypen:

• Für Text- und Auswahlfelder aktualisiert sie die entsprechende Eigenschaft im Zustand.
• Für Checkboxen fügt sie Toppings zur Liste hinzu oder entfernt sie daraus.

3. Wir haben eine handleSubmit-Funktion, die die Standardformularübergabe verhindert und eine Benachrichtigung mit den Bestelldetails anzeigt.
4. In der JSX erstellen wir Eingabefelder für den Namen, die Größe (als Auswahlfeld) und die Toppings (als Checkboxen).
5. Jedes Eingabefelds value (oder der checked-Zustand für Checkboxen) wird vom order-Zustand kontrolliert.

Die Macht der Controlled Forms

Mit diesem Setup haben Sie die volle Kontrolle über Ihre Formulardaten. Möchten Sie Validierung hinzufügen? Kein Problem! Passen Sie einfach die handleChange-Funktion an. Muss die Daten vor der Übermittlung transformiert werden? Aktualisieren Sie die handleSubmit-Funktion. Die Möglichkeiten sind endlos!

Häufige Methoden für Controlled Components

Lassen Sie uns einige häufig verwendete Methoden für Controlled Components zusammenfassen:

Methode	Beschreibung
useState	Hook zur Verwaltung des Komponentenzustands
onChange	Ereignisbehandler für Eingangsänderungen
onSubmit	Ereignisbehandler für Formularübermittlungen
preventDefault	Verhindert das Standardverhalten der Formularübermittlung
event.target.value	Ruft den aktuellen Wert eines Eingabefelds ab
event.target.checked	Ruft den checked-Zustand einer Checkbox ab

Fazit

Glückwunsch! Sie haben gerade Controlled Components in React gelernt. Wir haben einfache Eingaben, komplexe Formulare und sogar ein Pizza-Bestellformular erstellt (ich bekomme jetzt Hunger, wenn ich darüber nachdenke!).

Erinnern Sie sich daran, dass Controlled Components Ihnen die Macht geben, Formulardaten präzise zu verwalten. Es mag initially wie mehr Arbeit erscheinen, aber die Kontrolle und Flexibilität, die Sie gewinnen, sind es wert.

Während Sie Ihre Reise mit React fortsetzen, werden Sie unzählige Möglichkeiten finden, Controlled Components zu verwenden. Vielleicht erstellen Sie einen Blog-Beitrag-Editor, ein Benutzerregistrierungsformular oder sogar eine Pizza-Liefer-App (wenn ja, schicken Sie mir bitte einen Rabattcode!).

Weiter üben, neugierig bleiben und viel Spaß beim Programmieren!

Credits: Image by storyset