Meisterei von unkontrollierten Eingabefeldern mit React

Einführung

In diesem Lab werden wir untersuchen, wie man ein unkontrolliertes Eingabefeld mit React erstellt. Ein unkontrolliertes Eingabefeld ist eine einfache und flexible Möglichkeit, Benutzer-Eingaben zu erfassen, ohne den Werteszustand in der übergeordneten Komponente zu verwalten. Wir werden eine Callback-Funktion verwenden, um der übergeordneten Komponente über Wertesaktualisierungen zu informieren, was es einfacher macht, mit anderen Komponenten und APIs zu integrieren.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 100% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

Unkontrolliertes Eingabefeld

In der VM wurden bereits index.html und script.js bereitgestellt. Im Allgemeinen müssen Sie nur Code in script.js und style.css hinzufügen.

Dieser Code rendert ein unkontrolliertes <input>-Element, das eine Callback-Funktion verwendet, um seine übergeordnete Komponente über Wertesaktualisierungen zu informieren. Um es zu verwenden:

Übergeben Sie den Anfangswert von der übergeordneten Komponente mithilfe der defaultValue-Eigenschaft.
Übergeben Sie eine Callback-Funktion namens onValueChange, um Wertesaktualisierungen zu behandeln.
Verwenden Sie das onChange-Ereignis, um die Callback-Funktion auszulösen und den neuen Wert an die übergeordnete Komponente zu senden.

Hier ist ein Beispiel:

const UncontrolledInput = ({ defaultValue, onValueChange, ...rest }) => {
  return (
    <input
      defaultValue={defaultValue} target: { value } }) => onValueChange(value)}
      {...rest}
    />
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(
  <UncontrolledInput
    type="text"
    placeholder="Fügen Sie hier etwas Text ein..."
  />
);

Bitte klicken Sie auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab zu unkontrollierten Eingabefeldern abgeschlossen. Sie können in LabEx weitere Labs ausprobieren, um Ihre Fähigkeiten zu verbessern.