Wie erstellen Sie in React unkontrollierte Komponenten?

Wie erstellen Sie in React unkontrollierte Komponenten?

Unkontrollierte Komponenten in React sind solche, in denen Formaten vom DOM selbst behandelt werden, anstatt vom Zustand der Komponente zu verwalten. Um eine unkontrollierte Komponente zu erstellen, befolgen Sie die folgenden Schritte:

1. Verwenden Sie die defaultValue -Prop : Anstatt value zu verwenden, um den Anfangswert eines Formularelements (das ihn kontrolliert zu machen) festlegen, verwenden Sie defaultValue . Zum Beispiel würden Sie für ein Eingabefeld tun:

    <code class="jsx"><input type="text" defaultvalue="Initial Value"></code>

   Nach dem Login kopieren
2. Vermeiden Sie den Status auf Änderung festzulegen : In einer kontrollierten Komponente würden Sie den Status auf jedem Änderungsereignis aktualisieren. Für unkontrollierte Komponenten tun Sie dies nicht. Sie lassen die DOM die Änderungen intern umgehen.

3. Zugriff auf Daten über Refs : Da die Daten nicht vom Status von React verwaltet werden, müssen Sie bei Bedarf auf den aktuellen Wert zugreifen. Sie verwenden das ref -System von React, um einen Verweis auf den DOM -Knoten zu erstellen. So machst du es:

    <code class="jsx">class UncontrolledForm extends React.Component { constructor(props) { super(props); this.inputRef = React.createRef(); } handleSubmit = (event) => { event.preventDefault(); console.log('Input Value:', this.inputRef.current.value); } render() { return ( <form onsubmit="{this.handleSubmit}"> <input type="text" defaultvalue="Initial Value" ref="{this.inputRef}"> <button type="submit">Submit</button> </form> ); } }</code>

   Nach dem Login kopieren

Wenn Sie diese Schritte ausführen, können Sie eine unkontrollierte Komponente in React erstellen, in der die Formulardaten direkt vom DOM behandelt werden.

Was sind die Vorteile der Verwendung unkontrollierter Komponenten in React -Anwendungen?

Die Verwendung unkontrollierter Komponenten in React -Anwendungen ist mit mehreren Vorteilen verbunden:

1. Einfacher zu implementieren : Unkontrollierte Komponenten sind einfacher eingerichtet, da sie nicht die Verwaltung des Status und die Implementierung von Änderungshandlern erfordern. Dies macht sie für einfache Formen oder für Entwickler neu zu reagieren geeignet.
2. Weniger Boilerplate -Code : Da unkontrollierte Komponenten keine staatlichen Verwaltung und Ereignishandler benötigen, um den Status zu aktualisieren, führen sie normalerweise zu weniger Code. Dies kann die Anwendung erleichtern, wenn Sie das Lesen und Verwalten erleichtern.
3. Bessere Leistung : Indem Sie den DOM direkt ändern lassen, können Sie in einigen Szenarien eine bessere Leistung erzielen. Dies ist besonders nützlich, um Großformulare oder mehrere Eingabefelder zu behandeln, in denen jeder Tastenanschlag kein Status-Update auslöst und erneut rendert.
4. Kompatibilität mit Nicht-Reaktionscode : Wenn Sie Reaktionen in den vorhandenen Nicht-Reaktionscode integrieren, können unkontrollierte Komponenten einfacher zu arbeiten sein, da sie nicht das React-spezifische Statusverwaltungssystem benötigen.
5. Nützlich für einfache Anwendungsfälle : Für schnelle Prototypen oder einfache Anwendungsfälle können unkontrollierte Komponenten unkomplizierter und schneller sein, ohne dass ein komplexes Zustandsmanagement erforderlich ist.

Wie können Sie auf den Wert einer unkontrollierten Komponente in React zugreifen?

Um auf den Wert einer unkontrollierten Komponente in React zugreifen zu können, verwenden Sie normalerweise das ref -System. So können Sie es tun:

1. Erstellen Sie einen Ref : Erstellen Sie in Ihrer Komponente einen Ref mit React.createRef() oder dem useRef -Hook in funktionalen Komponenten.

    <code class="jsx">// In a class component constructor(props) { super(props); this.inputRef = React.createRef(); } // In a functional component const inputRef = useRef(null);</code>

   Nach dem Login kopieren

2. Fügen Sie den Ref an das DOM -Element an : Übergeben Sie den ref , wenn Sie Ihr Formularelement rendern.

    <code class="jsx">// Class component <input type="text" defaultvalue="Initial Value" ref="{this.inputRef}"> // Functional component <input type="text" defaultvalue="Initial Value" ref="{inputRef}"></code>

   Nach dem Login kopieren

3. Zugriff auf den Wert : Sie können bei Bedarf auf den Wert der unkontrollierten Komponente zugreifen, z. B. bei der Einreichung von Formular oder einem anderen Ereignis. Verwenden Sie ref.current.value , um den aktuellen Wert zu erhalten.

    <code class="jsx">// In a class component handleSubmit = (event) => { event.preventDefault(); console.log('Input Value:', this.inputRef.current.value); } // In a functional component const handleSubmit = (event) => { event.preventDefault(); console.log('Input Value:', inputRef.current.value); }</code>

   Nach dem Login kopieren

Durch die Ausführung dieser Schritte können Sie in React effektiv auf den Wert einer unkontrollierten Komponente zugreifen.

Wann sollten Sie unkontrollierte Komponenten gegenüber kontrollierten in der React -Entwicklung wählen?

Die Wahl zwischen kontrollierten und unkontrollierten Komponenten hängt von den spezifischen Bedürfnissen und Komplexität Ihres Projekts ab. Hier sind einige Szenarien, in denen Sie möglicherweise unkontrollierte Komponenten bevorzugen:

1. Einfache Formen : Für einfache Formulare, bei denen Sie keine feinkörnige Kontrolle über die Formulardaten benötigen, können unkontrollierte Komponenten einfacher und schneller zu implementieren sein.
2. Schnellprototyping : Wenn Sie sich schnell prototypieren oder entwickeln, können unkontrollierte Komponenten weniger zeitaufwändig sein, da sie weniger Setup erfordern.
3. Integration mit Nicht-Reaktionscode : Wenn Sie React in eine vorhandene Anwendung integrieren, die React nicht verwendet, können unkontrollierte Komponenten einfacher zu arbeiten, da sie enger mit der herkömmlichen DOM-Manipulation übereinstimmen.
4. Leistungsbedenken : In Anwendungen, bei denen die Leistung von entscheidender Bedeutung ist, insbesondere bei großen Formen, bieten unkontrollierte Komponenten möglicherweise eine bessere Leistung, da sie bei jeder Änderung keine Neuanschläge auslösen.
5. Legacy -Code -Wartung : Wenn Sie mit vorhandenem Code arbeiten, der bereits unkontrollierte Komponenten verwendet, kann es einfacher sein, sich an das gleiche Muster für Konsistenz und einfache Wartung zu halten.
6. Wenn das Zustandsmanagement nicht benötigt wird : Wenn die Formulardaten nicht von Reacts Status (z. B. für eine einfache Sucheingabe) verwaltet werden müssen, kann eine unkontrollierte Komponente einfacher sein.

Wenn Sie im Allgemeinen mehr Kontrolle über Formulardaten und ihre Validierung benötigen, sind kontrollierte Komponenten die bessere Wahl. Für einfachere oder leistungskritische Szenarien können unkontrollierte Komponenten jedoch gut passen.

Das obige ist der detaillierte Inhalt vonWie erstellen Sie in React unkontrollierte Komponenten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!