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 vom 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.

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(
          
     );
}

Im obigen Beispiel steuert die Statusvariable name den Wert des Eingabefelds. Die Funktion handleChange aktualisiert den Namensstatus immer dann, wenn sich der Eingabewert ändert und der Eingabewert durch 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 es nötig ist.

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

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

     return(
          

In diesem obigen Beispiel wird die inputRef verwendet, um eine ref für das Feld input 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.