Löschen Sie das Formular nach dem Absenden in React

Heutzutage müssen Websites miteinander konkurrieren, um die Aufmerksamkeit der Benutzer auf sich zu ziehen. Benutzer möchten nicht zu lange darüber nachdenken, wie sie eine Anwendung verwenden.

Die Wahl von React als Framework ist ein guter Anfang, da React-Apps blitzschnell sind.

Löschen Sie das Formular nach dem Absenden in React

Die meisten React-Anwendungen verwenden Formulare auf die eine oder andere Weise. Obwohl React auf JavaScript basiert, werden Formulare in React-Webanwendungen anders behandelt als in anderen Frameworks oder nativem JavaScript.

Sie müssen einige React-spezifische Details kennen, um Formulare erfolgreich in React zu implementieren.

In diesem Artikel wird der Anwendungsfall erläutert, wenn Sie den Inhalt des Formulars löschen müssen, nachdem es gesendet wurde. Wenn Benutzer beispielsweise eine To-Do-Aufgabe übermitteln müssen, sollte das Formular nach dem Ausfüllen und Absenden geleert werden, damit die Benutzer mit der Eingabe einer sauberen Tafel beginnen können.

Kontrollierte Komponenten

Bevor wir erörtern, wie Formulare gelöscht werden, nachdem sie eingereicht wurden, sollten wir das Konzept der kontrollierten Komponenten erläutern. Dies ist der Fall, wenn der Zustand den Wert der Eingabe steuert.

Beispielsweise können wir den Event-Handler onChange für die Eingabe <text> so einstellen, dass der Status jedes Mal aktualisiert wird, wenn der Benutzer einen neuen Buchstaben eingibt oder löscht.

Wir müssen Benutzereingaben löschen, die derzeit in dem Status übermittelt werden, wenn wir das Formular senden. Dies bedeutet nicht, dass wir den gesamten Status löschen, sondern nur die temporären Textfeldwerte, die mit dem Status verknüpft sind.

Beispiel für ein Clearing-Formular nach dem Absenden

Dies ist ein einfaches Beispiel, bei dem wir das Formular nach dem Absenden löschen.

import "./styles.css";
import { useState } from "react";
export default function App() {
  const [name, setName] = useState("");
  const [names, setNames] = useState([]);
  const handleChange = (e) => {
    setName(e.target.value);
  };
  const handleClick = () => {
    setNames([...names, name]);
    setName("");
  };
  return (
    <div className="App">
      <p>Enter a name</p>
      <input type="text" value={name} onChange={(e) => handleChange(e)}></input>
      <br></br>
      <br></br>
      <button onClick={() => handleClick()}>Add Name</button>
      {names.map((name) => (
        <h1>{name}</h1>
      ))}
    </div>
  );
}

Wie Sie in dieser Live-Demo sehen können, haben wir eine einfache Texteingabe, bei der Benutzer ihre Namen eingeben sollen. Wir haben auch eine Schaltfläche mit der Aufschrift Name hinzufügen.

Jedes Mal, wenn der Benutzer einen Namen in das Feld eingibt und auf die Schaltfläche klickt, wird dieser Name in der Liste angezeigt und das Eingabefeld wird gelöscht.

Wir verwenden den Hook useState(), um zwei Zustandsvariablen zu erstellen: name und names und entsprechende Funktionen, um sie zu aktualisieren.

Der Wert der Zustandsvariable name wird an das Eingabefeld gebunden. Jeder neue Buchstabe, der in das Feld eingegeben wird, aktualisiert den Wert der Statusvariablen name.

Die Zustandsvariable names wird als leeres Array initialisiert. Wir richten den Event-Handler handleClick so ein, dass jedes Mal, wenn der Benutzer auf diese Schaltfläche klickt, der aktuell in das Textfeld eingegebene Wert zum Array hinzugefügt wird.

Am wichtigsten ist, dass wir in der Funktion handleClick() die Funktion setName() verwenden, um den Wert der Statusvariablen name auf einen leeren String zurückzusetzen. Da der Wert im Texteingabefeld an die Zustandsvariable gebunden ist, ist er leer (um eine leere Zeichenfolge wiederzugeben).