Kontrollierte und unkontrollierte Eingaben

Kontrollierte und unkontrollierte Eingaben sind Begriffe, die im Zusammenhang mit Formulareingaben in der Webentwicklung verwendet werden, insbesondere in Frameworks wie React.

Kontrollierte Eingaben

Bei kontrollierten Eingaben wird der Wert des Eingabefelds durch den Zustand der Komponente gesteuert. Das bedeutet, dass der Status der Komponente den aktuellen Wert der Eingabe enthält und wenn sich der Eingabewert ändert (z. B. durch Benutzereingaben), aktualisiert sie den Status und der Eingabewert spiegelt den Status wider. Dies geschieht normalerweise, indem die Wertstütze der Eingabe auf den Statuswert gesetzt und ein onChange-Handler bereitgestellt wird, um den Status zu aktualisieren, wenn sich die Eingabe ändert. Kontrollierte Eingaben werden häufig in React-Anwendungen zur Formularverarbeitung verwendet.

import React, { useState } from 'react';

function ControlledInputExample() {
  const [inputValue, setInputValue] = useState('');

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

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

Unkontrollierte Eingaben

Bei unkontrollierten Eingaben wird der Wert des Eingabefelds nicht direkt durch den React-Status gesteuert. Stattdessen verwaltet das Eingabeelement intern seinen eigenen Status. Das bedeutet, dass React keine direkte Kontrolle über den Eingabewert hat und um den Wert zu erhalten, müssen Sie normalerweise direkt auf das DOM zugreifen (z. B. mithilfe von Refs), anstatt den React-Status abzufragen. Unkontrollierte Eingaben kommen in React seltener vor, können aber in bestimmten Situationen nützlich sein, z. B. bei der Handhabung komplexer Formularverhalten oder bei der Integration mit Nicht-React-Bibliotheken, die den Eingabestatus unterschiedlich verwalten.

import React, { useRef } from 'react';

function UncontrolledInputExample() {
  const inputRef = useRef(null);

  const handleClick = () => {
    console.log(inputRef.current.value);
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Get Value</button>
    </div>
  );
}

Zusammenfassend lässt sich sagen, dass kontrollierte Eingaben den Eingabewert direkt mit dem React-Status verknüpfen und so mehr Kontrolle und Synchronisierung zwischen der Benutzeroberfläche und dem Status ermöglichen. Unkontrollierte Eingaben werden intern vom DOM oder anderen Bibliotheken verwaltet, wobei React bei Bedarf indirekt auf ihre Werte zugreift.

Das obige ist der detaillierte Inhalt vonKontrollierte und unkontrollierte Eingaben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!