Den Wert eines Eingabefeldes in React abrufen

1. Wie Eingaben in React funktionieren
2. Den Wert eines Eingabefeldes in React 16 abrufen
3. Den Wert des Eingabefeldes in React mit Hooks abrufen
4. Umgang mit großen Formularen mit Dutzenden von Eingaben

Der Umgang mit Benutzereingaben ist einer der Schlüssel zur Entwicklung dynamischer React-Anwendungen. Wenn Sie mit Benutzereingaben arbeiten, können Sie auf deren Aktionen React und eine hervorragende Benutzererfahrung bieten.

Bei der Arbeit in React ist es sinnvoll, Benutzereingaben in den Zustandseigenschaften zu speichern, um eine einzige Quelle der Wahrheit zu schaffen. Auf diese Weise können Sie problemlos mit den Daten interagieren und sie bei Bedarf manipulieren.

Immer wenn sich der Status ändert, aktualisiert React die Komponente automatisch, um die neuesten Änderungen widerzuspiegeln.

Wie Eingaben in React funktionieren

Bevor wir fortfahren, müssen wir verstehen, wann und warum React beschließt, eine Komponente neu zu rendern.

Zuerst wird die Anwendungs-UI aktualisiert (neu gerendert), wenn sich ihr interner Zustand ändert. Jedes Benutzerereignis, wie das Auswählen einer anderen Option oder das Aktivieren/Deaktivieren eines Felds, kann den Status ändern und eine erneute Darstellung verursachen.

Zweitens erfolgt das erneute Rendern, wenn eine Änderung in den Komponentenprops erfolgt, die vom übergeordneten Element empfangen wird. In einigen Fällen liefert die Elternkomponente prop-Werte aus ihrem Zustand.

React verwendet JSX, das HTML sehr ähnlich sieht, aber anders funktioniert.

Es ist wichtig zu bedenken, dass Sie beim Erstellen eines <input>-Elements in JSX nicht das HTML-Element <input> erstellen, sondern ein React input-Objekt, das diesem sehr ähnlich ist. Es rendert ähnlich wie das HTML-Element input und imitiert dessen Ereignisbehandlungsschnittstelle, ist aber ansonsten unabhängig.

React-Anwendungen bestehen aus UI-Elementen, die ihre Werte aus dem Komponentenzustand beziehen. Wie bereits erwähnt, ist das Ändern der Eingabe eine der gängigsten Methoden zum Ändern des Status und damit auch der auf der Seite gerenderten visuellen Elemente.

Beachten Sie jedoch, dass der Staat die einzige Quelle der Wahrheit in React-Anwendungen ist. Die UI-Schnittstelle hat eine untergeordnete Rolle.

Den Wert eines Eingabefeldes in React 16 abrufen

Seit der Veröffentlichung von React 16 können Entwickler React-Klassenkomponenten mithilfe einer lesbaren Klassensyntax erstellen. Bitte beachten Sie, dass Sie sie entweder in der Konstruktorfunktion binden oder mit der Pfeilsyntax aufrufen müssen, damit Ereignishandler funktionieren, wie im folgenden Beispiel.

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      enteredValue: ""
    }
  }
  render() {
    console.log(this.state.enteredValue)
    return <input type="text"
                  onChange={(event) => this.setState({enteredValue: event.target.value})}>
           </input>;
  }
}

Im Allgemeinen ist es besser lesbar und bequemer, die Pfeilsyntax zu verwenden. Es erleichtert auch das Debuggen von Anwendungen.

Sie können den playcode selbst überprüfen und sehen, dass jedes Mal, wenn Sie (auch bekannt als der Benutzer) etwas Neues in das Eingabefeld eingeben, der Statuswert aktualisiert und dann an der Konsole protokolliert wird (zu Demonstrationszwecken).

Den Wert des Eingabefeldes in React mit Hooks abrufen

Funktionale Komponenten sind noch einfacher zu schreiben und zu lesen als Klassenkomponenten. Diese Art von Komponente ist nur eine Funktion, die props als Argument akzeptiert.

Bis vor wenigen Jahren wurden Funktionskomponenten auch als zustandslose oder dumme Komponenten bezeichnet und meist zur Visualisierung der Daten verwendet.

Seit React 16.8 haben funktionale Komponenten Zugang zu vielen neuen Funktionen erhalten, einschließlich Hooks. Jetzt können die Entwickler den useState()-Hook verwenden, um einen Zustand in einer funktionalen Komponente aufrechtzuerhalten.

Mit diesem Hook können Sie eine Zustandsvariable und die Funktion zum Aktualisieren abrufen. Sie müssen die API .setState() nicht mehr direkt in Funktionskomponenten verwenden.

So würde dieselbe Anwendung aussehen, wenn sie mit funktionalen Komponenten erstellt würde:

function App(props){
  let [inputValue, setInputValue] = useState("")
  console.log(inputValue)
  return <input type="text"
            onChange={(event) => setInputValue(event.target.value)}>
         </input>;
}

Der Hook useState() funktioniert auf sehr einfache Weise. Nach dem Aufruf gibt es eine dem inputValue zugewiesene Zustandsvariable und eine Funktion zum Aktualisieren zurück.

Eine eigene Funktion zum Aktualisieren jeder Variablen kann aus Sicht der Lesbarkeit von Vorteil sein. Wie wir sehen, hat setInputValue einen ziemlich aussagekräftigen Namen.

Das an den Hook useState() übergebene Argument (leerer String) wird als Initialwert für die Zustandsvariable inputValue verwendet.

Wie Sie sehen, ist diese Definition viel sauberer und funktioniert genauso gut wie eine Klassenkomponente. Funktionale Komponenten sind normalerweise die bessere Wahl, wenn Sie eine Komponente mit nur wenigen Variablen benötigen, um Zustandswerte zu speichern.

In einigen Fällen sind Klassenkomponenten jedoch notwendig und unterscheiden sich von funktionalen Komponenten. Um mehr über die Unterschiede zu erfahren, lesen Sie die offizielle Reaktionsdokumentation.

Umgang mit großen Formularen mit Dutzenden von Eingaben

Wie bereits erwähnt, benötigen Sie für jedes UI-Eingabeelement eine Zustandsvariable, um den von Benutzern eingegebenen Wert aufzunehmen. Es ist nicht ungewöhnlich, dass Formulare Dutzende von Eingaben haben, sogar Hunderte. Sollten Sie für alle eine separate Zustandsvariable erstellen?

Die Lösung ist einfach und entspricht der Gesamtlogik von React. Anstatt diese Eingaben in einer großen Komponente zu haben, sollten Sie sie in logisch verbundene Teile aufteilen, indem Sie separate kleine Komponenten erstellen.

Anschließend können Sie sie importieren und zum Erstellen Ihres großen Formulars verwenden. So sind kleinere Komponenten nur für die Speicherung und Pflege weniger Eingaben zuständig.

Auf diese Weise strukturierte Apps sind besser lesbar und einfacher zu warten. Andere Entwickler, die an Ihrem Code arbeiten, werden Ihnen dafür danken, dass Sie einfachen und verständlichen Code schreiben.