ReactJS - Unkontrollierte Komponenten

Hallo, ambitionierte Programmierer! Heute tauchen wir in die Welt von ReactJS ein und erkunden ein Konzept namens "Unkontrollierte Komponenten". Machen Sie sich keine Sorgen, wenn Sie neu im Programmieren sind – ich werde Sie Schritt für Schritt führen, genau wie ich es über die Jahre mit unzähligen Schülern gemacht habe. Holen Sie sich eine Tasse Ihres Lieblingsgetränks und lassen Sie uns gemeinsam diese aufregende Reise antreten!

Was sind Unkontrollierte Komponenten?

Bevor wir ins Detail gehen, lassen Sie uns verstehen, was unkontrollierte Komponenten in React sind. Stellen Sie sich vor, Sie füllen ein Papierformular aus – Sie schreiben Ihre Informationen auf und wenn Sie fertig sind,.submit Sie es. Das ist im Grunde, wie unkontrollierte Komponenten in React funktionieren!

In React ist eine unkontrollierte Komponente ein Formularelement, das seinen eigenen Zustand intern verwaltet, anstatt dass React es kontrolliert. Es ist, als würde man dem Formularelement einen eigenen Verstand geben!

Formularprogrammierung in Unkontrollierten Komponenten

Nun, lasSEN wir die Ärmel hochkrempeln und mit ein wenig Code herum experimentieren. Wir beginnen mit einem einfachen Beispiel, um zu zeigen, wie unkontrollierte Komponenten in der Formularprogrammierung funktionieren.

Einfaches Unkontrolliertes Eingabefeld

Hier ist ein einfaches Beispiel eines unkontrollierten Eingabefelds:

import React from 'react';

function SimpleForm() {
return (
<form>
<label htmlFor="name">Name:</label>
<input type="text" id="name" name="name" />
</form>
);
}

export default SimpleForm;

In diesem Beispiel haben wir ein einfaches Formular mit einem Texteingabefeld für einen Namen. Beachten Sie, dass wir keine Zustände oder onChange-Handler haben? Das liegt daran, dass die Eingabe ihren eigenen Zustand intern verwaltet.

Zugriff auf Eingabewerte

Aber warten Sie, Sie fragen sich vielleicht, "Wie bekommen wir den Wert der Eingabe, wenn React es nicht verwaltet?" Tolle Frage! Wir können eine Referenz verwenden, um direkt auf das DOM-Element zuzugreifen. Lassen Sie uns unser Beispiel modifyzieren:

import React, { useRef } from 'react';

function SimpleForm() {
const inputRef = useRef(null);

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

return (
<form onSubmit={handleSubmit}>
<label htmlFor="name">Name:</label>
<input type="text" id="name" name="name" ref={inputRef} />
<button type="submit">Übermitteln</button>
</form>
);
}

export default SimpleForm;

In dieser aktualisierten Version verwenden wir den useRef-Hook, um eine Referenz zu unserem Eingabefeld zu erstellen. Wenn das Formular übermittelt wird, können wir den Wert der Eingabe über inputRef.current.value abrufen.

Erstellung eines Einfachen Formulars

Nun, da wir die Grundlagen verstehen, erstellen wir ein umfassenderes Formular mit unkontrollierten Komponenten.

Formular mit Mehreren Eingaben

import React, { useRef } from 'react';

function ComplexForm() {
const nameRef = useRef(null);
const emailRef = useRef(null);
const messageRef = useRef(null);

const handleSubmit = (event) => {
event.preventDefault();
const formData = {
name: nameRef.current.value,
email: emailRef.current.value,
message: messageRef.current.value
};
console.log('Formulardaten:', formData);
// Hier würden Sie typischerweise die Daten an einen Server senden
};

return (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="name">Name:</label>
<input type="text" id="name" name="name" ref={nameRef} required />
</div>
<div>
<label htmlFor="email">E-Mail:</label>
<input type="email" id="email" name="email" ref={emailRef} required />
</div>
<div>
<label htmlFor="message">Nachricht:</label>
<textarea id="message" name="message" ref={messageRef} required />
</div>
<button type="submit">Nachricht senden</button>
</form>
);
}

export default ComplexForm;

In diesem Beispiel haben wir ein Formular mit drei Feldern: Name, E-Mail und Nachricht. Jedes Feld hat seine eigene Referenz, die es uns ermöglicht, ihren Wert abzurufen, wenn das Formular übermittelt wird.

Erklärung

1. Wir erstellen Referenzen für jede Eingabe mit useRef.
2. In der handleSubmit-Funktion verhindern wir das Standardverhalten der Formularübermittlung und sammeln die Werte jeder Eingabe über ihre Referenzen.
3. Wir protokollieren dann die Formulardaten in der Konsole (in einer realen Anwendung würden Sie diese Daten typischerweise an einen Server senden).

Vor- und Nachteile von Unkontrollierten Komponenten

Lassen Sie uns einen Moment innehalten, um die Vorteile und Nachteile der Verwendung von unkontrollierten Komponenten zu besprechen:

Vorteile	Nachteile
Einfachere Kodierung für grundlegende Formulare	Weniger Kontrolle über Formularwerte
Kann nützlich sein für die Integration von React mit nicht-React-Code	Schwieriger zu implementierende dynamische Formularvalidierung
Möglicherweise bessere Leistung für sehr große Formulare	Schwierig, Formularwerte programmatisch zurückzusetzen
Funktioniert gut mit Dateieingaben	Weniger "React-ähnlich" - folgt nicht dem Prinzip der einzigen Wahrheitsquelle

Wann man Unkontrollierte Komponenten Verwendet

Unkontrollierte Komponenten können in bestimmten Szenarien nützlich sein:

1. Wenn Sie mit nicht-React-Code oder Bibliotheken integrieren
2. Für einfache Formulare, bei denen Sie keine Echtzeit-Validierung oder dynamischen Updates benötigen
3. Wenn Sie mit Dateieingaben arbeiten (die inhärent unkontrolliert sind)

Für die meisten React-Anwendungen werden jedoch kontrollierte Komponenten (bei denen React den Formularzustand verwaltet) in der Regel bevorzugt, da sie mehr Kontrolle bieten und besser mit der React-Philosophie übereinstimmen.

Fazit

Und das war's, Leute! Wir haben die Welt der unkontrollierten Komponenten in React durchquert. Denken Sie daran, wie die Wahl zwischen einem Handschalter und einem Automatikgetriebe, die Wahl zwischen kontrollierten und unkontrollierten Komponenten hängt von Ihren spezifischen Bedürfnissen ab.

Als wir uns abschließen, erinnere ich mich an einen Schüler, der mir einmal sagte: "React ist wie Kochen – manchmal brauchen Sie präzise Maße und manchmal können Sie es einfach abschätzen." Unkontrollierte Komponenten sind ein bisschen wie Abschätzen – sie haben ihren Platz, aber verwenden Sie sie weise!

Ich hoffe, diese Anleitung hat Ihnen den Weg zu unkontrollierten Komponenten erleuchtet. Üben Sie weiter, codieren Sie weiter und denken Sie daran – in der Welt des Programmierens ist jeder Fehler ein Sprungstein zum Erfolg!

Frohes Coden, zukünftige React-Meister!

Credits: Image by storyset