Was sind reaktionskontrollierte Komponenten?

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. Es wird in den Zustand der Komponente geschrieben. Dieser Komponententyp wird in React als kontrollierte Komponente bezeichnet.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 17.0.1, Dell G3-Computer.

Was sind React-gesteuerte Komponenten?

Die React-Komponente, die das Formular rendert, steuert auch die Vorgänge, die während der Benutzereingabe auf dem Formular ausgeführt werden. Formulareingabeelemente, deren Werte auf diese Weise von React gesteuert werden, werden als „kontrollierte Komponenten“ bezeichnet.

Einige Internetnutzer haben dies erklärt: In React wird der Status des Formulars immer dann in den Status der Komponente geschrieben, wenn dieser Komponententyp in React als kontrollierte Komponente bezeichnet wird.

Aktualisierungsprozess gesteuerter Komponenten:

• 1 Sie können den Standardwert des Formulars im Anfangszustand festlegen

• 2. Rufen Sie den onChange-Ereignishandler auf

• 3. Der Ereignisprozessor erhält den geänderten Status über das Ereignisobjekt e und ändert den Status.

• 4 Rückruffunktion Aktualisiert den aktuellen Wert, z. B. 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);
    return <input type="text" value={email} onChange={handleInput} />;
  }

Erweitertes Wissen:

Was ist eine unkontrollierte Komponente? Unkontrollierte Komponenten sind Komponenten, die ihren eigenen Status intern speichern. Sie können ref verwenden, um das DOM abzufragen, um bei Bedarf seinen aktuellen Wert zu ermitteln. Ein bisschen wie traditionelles HTML. Die meisten nativen React-Formularkomponenten unterstützen sowohl kontrollierte als auch unkontrollierte Komponenten:

const { useRef } from 'react';
function Example () {
  const inputRef = useRef(null);
  return <input type="text" defaultValue="bar" ref={inputRef} />
}

4 Was ist der Unterschied 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.

Für kontrollierte Komponenten können wir die Eingabe validieren, nicht jedoch für unkontrollierte Komponenten.

【Verwandte Empfehlungen:

Javascript-Video-Tutorial

,

Web-Frontend

】

Das obige ist der detaillierte Inhalt vonWas sind reaktionskontrollierte Komponenten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!