In React bezieht sich eine kontrollierte Komponente auf eine Komponente, die den aktuellen Wert über eine Rückruffunktion aktualisiert. Die React-Komponente, die das Formular rendert, steuert auch die Vorgänge, die während der Benutzereingabe auf dem Formular ausgeführt werden In den Zustand der Komponente geschrieben werden, wird diese Art von Komponente in React als kontrollierte Komponente bezeichnet.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 17.0.1, Dell G3-Computer.
Die React-Komponente, die das Formular rendert, steuert auch, was mit dem Formular während der Benutzereingabe geschieht. Formulareingabeelemente, deren Werte auf diese Weise von React gesteuert werden, werden als „kontrollierte Komponenten“ bezeichnet.
Einige Internetnutzer erklärten Folgendes: In React wird jedes Mal, wenn sich der Status des Formulars ändert, in den Status der Komponente geschrieben. Dieser Komponententyp wird in React als kontrollierte Komponente bezeichnet.
Update-Prozess für kontrollierte Komponenten:
1. Sie können den Standardwert des Formulars im Ausgangszustand festlegen
2. Wenn sich der Wert des Formulars ändert, rufen Sie den Ereignishandler onChange auf.
3. Der Ereignisprozessor erhält den geänderten Status über das Ereignisobjekt e und ändert den Status.
4. setState löst die Ansichtsaktualisierung aus und schließt die Aktualisierung der Formularkomponentenwerte ab.
Gesteuerte Komponenten aktualisieren den aktuellen Wert über Rückruffunktionen wie OnChange. Die übergeordnete Komponente steuert und verwaltet ihren Zustand über Rückruffunktionen und übergibt ihr neue Werte als Eigenschaften. Kontrollierte Komponenten werden auch „dumme Komponenten“ genannt.
const { useState } from 'react'; function Controlled () { const [email, setEmail] = useState(); const handleInput = (e) => setEmail(e.target.value); value={email} onChange={handleInput} />;}Erweitern Sie Ihr Wissen:
Was sind unkontrollierte Komponenten?
Unkontrollierte Komponenten sind Komponenten, die ihren eigenen Status intern speichern und bei Bedarf mithilfe von ref das DOM abfragen können, um ihren aktuellen Wert zu ermitteln. Ein bisschen wie traditionelles HTML. Die meisten nativen React-Formularkomponenten unterstützen kontrolliert und unkontrolliert:
const { useRef } from 'react';function Beispiel () { const inputRef = useRef(null); return <input type="text" defaultValue="bar" ref={inputRef} />}4 Was sind die Unterschiede zwischen ihnen?
In kontrollierten Komponenten werden Formulardaten von React-Komponenten verarbeitet. In unkontrollierten Komponenten werden die Formulardaten vom DOM selbst verarbeitet.
Für gesteuerte Komponenten muss der Komponentenstatus verwendet werden. Für unkontrollierte Komponenten ist die Verwendung von „state“ völlig optional, es müssen jedoch darin Refs verwendet werden.
Bei kontrollierten Komponenten können wir die Eingabe validieren, bei unkontrollierten Komponenten jedoch nicht.