Alert-Methode in React

Kunden nutzen gerne Webanwendungen mit interaktiven Funktionen. Die Aufrechterhaltung hoher Benutzererfahrungsstandards stellt sicher, dass Ihre Benutzer länger bleiben und auf Ihre Website zurückkehren.

Die Kommunikation mit Kunden ist eines der wesentlichen Elemente für die Aufrechterhaltung einer guten UX. Sie können beispielsweise roten Text verwenden, um Benutzern mitzuteilen, dass etwas nicht stimmt.

Webentwickler können viele andere Methoden verwenden, um mit Benutzern zu kommunizieren. In diesem Artikel werden wir die alert()-Methode untersuchen und wie sie zur Kommunikation mit Benutzern verwendet werden kann.

Verwenden Sie window.alert() in React

Die Methode alert() wird oft verwendet, um dem Benutzer eine Nachricht anzuzeigen. Diese Methode zeigt ein Dialogfeld an, das durch Klicken auf eine Schaltfläche verwendet werden kann.

Die Popup-Meldung wird in der Mitte der Seite angezeigt und schränkt die Möglichkeiten der Benutzer ein, mit Ihrer App zu interagieren.

Es hebt die Nachricht in der Warnung hervor, daher sollte die Methode verwendet werden, um etwas Wichtiges zu kommunizieren. Benutzer können Ihre Anwendung jedoch weiterhin verwenden, wenn sie die Nachricht schließen.

Im Idealfall sollte window.alert() nur ausgelöst werden und eine Popup-Meldung anzeigen, wenn etwas nicht stimmt. Wenn es keine signifikanten Fehler gibt, können Sie andere, weniger eindringliche Methoden verwenden, um mit Benutzern zu kommunizieren.

Die Methode akzeptiert ein Argument, eine Zeichenfolge, die den Text im Warnfeld darstellt. Es gibt nichts zurück.

Um besser zu verstehen, wie alert() funktioniert, schauen wir uns dieses Beispiel an.

import "./styles.css";
import { useState } from "react";
export default function App() {
  const [error, setError] = useState(true);
  const validateField = (e) => {
    setError(e.target.value.indexOf("@") === -1 ? true : false);
  };
  const handleEmailSubmit = (e) => {
    if (error) {
      alert("please enter correct e-mail");
    } else {
      return null;
    }
  };
  return (
    <div className="App">
      <input type="text" onChange={(e) => validateField(e)}></input>
      <button onClick={() => handleEmailSubmit()}>Submit E-mail</button>
    </div>
  );
}

Wenn Sie sich die Live-Demo auf Codesandbox ansehen, sehen Sie, dass wir eine einfache Anwendung mit einem Eingabefeld und einem Button zum Absenden haben.

Hier importieren wir den useState()-Hook, um eine Zustandsvariable error zu erstellen, und die Funktion, um ihren Wert zu aktualisieren. Später werden wir diese Zustandsvariable überprüfen, um zu entscheiden, ob die Benutzer benachrichtigt werden sollen und ihnen sagen, dass sie ihre E-Mail-Adresse korrekt eingeben sollen.

Wir werden die Zustandsvariable standardmäßig auf true setzen, da das Senden eines leeren Felds einen Fehler verursachen sollte.

In der Funktion validateField() prüfen wir, ob der Wert in der Texteingabe eine echte E-Mail ist und aktualisieren die Zustandsvariable error entsprechend.

Insbesondere prüfen wir, ob die Texteingabe das für jede E-Mail unerlässliche Symbol @ enthält. Wir verwenden den ternären Operator, um die Zustandsvariable auf true zu aktualisieren, wenn im Textfeld kein @-Symbol vorhanden ist.

Andernfalls setzen wir die Variable error auf false.

Wir haben auch eine handleEmailSubmit()-Funktion, die ausgeführt wird, wenn der Benutzer auf die Schaltfläche in unserer App klickt. Es prüft den Wert der Zustandsvariable error und ruft im Fehlerfall die Funktion alert() auf.

In JSX haben wir einen <div>-Container mit zwei Elementen, <input> und <button>. Die Texteingabe hat einen onChange-Event-Handler, der bei jeder Wertänderung überprüft, ob die Eingabe das @-Symbol enthält, und den Wert der error-Variablen entsprechend aktualisiert.

Der Event-Handler onClick der Schaltfläche ruft die Funktion handleEmailSubmit auf, die bei einem Fehler eine Warnung anzeigt.