Hallo Habr! Ich präsentiere Ihnen die Übersetzung des Artikels "Kontrollierte und unkontrollierte Formulareingaben in React müssen nicht kompliziert sein" von Gosha Arinich.Möglicherweise haben Sie viele Artikel gesehen, in denen es heißt: "Sie sollten" setState "nicht verwenden, während in den Dokumenten behauptet wird, dass" refs schlecht sind ". Dies ist alles sehr widersprüchlich. Manchmal ist es schwierig herauszufinden, wie man die Dinge richtig macht. und was sind die Kriterien für die Auswahl zwischen diesen Methoden? Wie erstellen Sie Formulare? Schließlich sind Formulare für viele Webanwendungen von zentraler Bedeutung.Dennoch ist die Formularverarbeitung in React der Eckpfeiler, nicht wahr? so schwer Lassen Sie mich Ihnen die Unterschiede zwischen diesen Ansätzen zeigen und wann Sie jeden von ihnen verwenden sollten.Nicht verwaltete Komponenten
Nicht verwaltete Komponenten sind wie normale HTML-Formulare:class Form extends Component {
render() {
return (
<div>
<input type="text" />
</div>
);
}
}
Sie erinnern sich an alles, was Sie eingegeben haben. Dann können Sie ihren Wert mit ref erhalten. Zum Beispiel im onClick-Handler:
class Form extends Component {
handleSubmitClick = () => {
const name = this._name.value;
}
render() {
return (
<div>
<input type="text" ref={input => this._name = input} />
<button onClick={this.handleSubmitClick}>Sign up</button>
</div>
);
}
}
Mit anderen Worten, Sie müssen die Werte bei Bedarf aus dem Feld „ziehen“. Dies kann beim Absenden des Formulars erfolgen.Dies ist der einfachste Weg, Formulare zu implementieren. Natürlich muss es einen guten Grund dafür geben, nämlich: die einfachsten Formen, entweder während des Studiums von React.Diese Methode ist jedoch nicht so flexibel. Schauen wir uns also die verwalteten Komponenten genauer an.Verwaltete Komponenten:
Die verwaltete Komponente akzeptiert ihren aktuellen Wert als Requisiten sowie einen Rückruf, um diesen Wert zu ändern. Sie können sagen, dass dies eine „reaktivere“ Methode zur Steuerung der Komponente ist. Dies bedeutet jedoch nicht, dass Sie diese Methode immer verwenden sollten.
<input value={someValue} onChange={handleChange} />
Das ist alles sehr gut, aber der Wert des Eingabeformulars muss in einem bestimmten Zustand vorhanden sein. In der Regel speichert eine Komponente, die ein Eingabeformular (d. H. Ein Formular) rendert, diese in ihrem Status:
class Form extends Component {
constructor() {
super();
this.state = {
name: '',
};
}
handleNameChange = (event) => {
this.setState({ name: event.target.value });
};
render() {
return (
<div>
<input
type="text"
value={this.state.name}
onChange={this.handleNameChange}
/>
</div>
);
}
}
(Natürlich kann es sich im Status einer anderen Komponente oder sogar in einem separaten Statusspeicher befinden, z. B. Redux).Jedes Mal, wenn Sie ein neues Zeichen eingeben, wird handleNameChange aufgerufen. Es nimmt den neuen Wert des Eingabeformulars und schreibt es in den Status.
- Alles beginnt mit einer leeren Zeile - '';
- Sie geben den Buchstaben 'a' ein und handleNameChange ruft ihn ab und ruft setState auf. Dann wird das Eingabeformular erneut mit dem Wert 'a' gerendert;
- Sie geben den Buchstaben 'b' ein und handleNameChange erhält den Wert 'ab' und setzt ihn auf state. Das Opet-Eingabeformular wird gerendert, jetzt jedoch mit dem Wert 'ab'.
Dieser Stream scheint Änderungen in das Formular zu "pushen", weshalb die Komponente immer den aktuellen Wert der Eingabedaten hat, ohne dass eine explizite Aktualisierungsanforderung erforderlich ist.Dies bedeutet, dass Ihre Daten (Status) und Benutzeroberfläche (Eingabeformular) immer synchron sind. Der Status gibt dem Formular einen Wert, während das Formular den aktuellen Statuswert ändert.Dies bedeutet auch, dass Formulare sofort auf Änderungen reagieren können, was wiederum erforderlich ist, um:- schnelles Feedback wie Validierung;
- Deaktivieren Sie eine bestimmte Schaltfläche, bis alle Formularfelder gültig sind.
- Aktivieren der Verarbeitung bestimmter Eingabefeldformate, z. B. Kreditkartennummern.
Wenn Sie es jedoch nicht benötigen und der Meinung sind, dass nicht verwaltete Komponenten viel einfacher sind, verwenden Sie sie.Was macht eine Komponente „überschaubar“?
Natürlich gibt es auch andere Formularelemente wie Kontrollkästchen, Radio, Textbereich und Auswahl.Eine Komponente wird verwaltbar, wenn Sie ihren Wert mithilfe von Requisiten festlegen. Das ist alles.Jedes der Formularelemente verfügt jedoch über unterschiedliche Methoden zum Festlegen des Werts. Hier ist eine kleine Tabelle zum allgemeinen Verständnis:Ergebnisse
Sowohl verwaltete als auch nicht verwaltete Komponenten haben Vor- und Nachteile. Bewerten Sie eine bestimmte Situation und wählen Sie einen Ansatz - wenn dies für Sie funktioniert, warum nicht davon profitieren?Wenn Ihr Formular in Bezug auf die Interaktion mit der Benutzeroberfläche unglaublich einfach ist, sind nicht verwaltete Komponenten perfekt für Sie. Sie müssen nicht auf das hören, was verschiedene Artikel für schlecht halten.
Darüber hinaus ist die Auswahl eines Komponententyps keine endgültige Entscheidung: Sie können nicht verwaltete Komponenten jederzeit durch verwaltete ersetzen. Der Übergang von einem zum anderen ist nicht so schwierig.