Reagieren Sie auf kontrollierte/unkontrollierte Komponenten

In React gibt es zwei Hauptansätze für den Umgang mit Formulareingaben:

• Kontrollierte Komponenten
• Unkontrollierte Komponenten

Kontrollierte Komponenten bieten mehr Kontrolle und Validierung, während unkontrollierte Komponenten einfacher und nützlich für Grundformen des intermittierenden Wertzugriffs sind.

Kontrollierte Komponenten

Dies sind Formulareingaben, deren Werte durch React State gesteuert werden. Die Zustandsvariablen werden immer dann aktualisiert, wenn sich der Wert der Eingabe ändert, und der Wert der Eingabe wird explizit über die Wertprop.

festgelegt

Der onChange-Ereignishandler wird zum Aktualisieren des Status verwendet.

import React, { useState } from "react";
function ControlledComponent() {
     const [name, setName] = useState("")

     const handleChange = (e) => {
          setName(e.target.value);
     }

     return(
          <input
               type="text"
               value={name}
               onChange={handleChange}
          />
     );
}

Im obigen Beispiel steuert die Zustandsvariable Name den Wert des Eingabefelds. Die Funktion handleChange aktualisiert den Namensstatus immer dann, wenn sich der Eingabewert ändert und der Eingabewert über die Wertprop.

auf den aktuellen Wert der Namensstatusvariablen gesetzt wird

Unkontrollierte Komponenten

Unkontrollierte Komponenten sind Formulareingaben, die ihren Status intern verwalten und nicht vom React State gesteuert werden. Sie können über eine ref auf den aktuellen Wert der Eingabe zugreifen, nachdem das Formular abgeschickt wurde oder wann immer Sie es benötigen.

import React, { useRef } from "react";
function UncontrolledComponent() {
     const inputRef = useRef(null);

     const handleSubmit = (e) => {
          e.preventDefault();
          console.log(inputRef.current.value);
     };

     return(
          <form onSubmit={handleSubmit}>
               <input
                    type="text"
                    ref={inputRef}
               />
               <button type="submit">Submit</button>
          </form>
     );
}

In diesem obigen Beispiel wird die inputRef verwendet, um eine ref für das input-Feld zu erstellen. Die Funktion handleSubmit greift über inputRef.current.value auf den aktuellen Wert der Eingabe zu. Die Formularübermittlungslogik kann implementiert werden, um den Eingabewert nach Bedarf zu verwenden.

Das obige ist der detaillierte Inhalt vonReagieren Sie auf kontrollierte/unkontrollierte Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!