Método de alerta en React

A los clientes les gusta usar aplicaciones web con funciones interactivas. Mantener altos estándares de experiencia de usuario asegurará que sus usuarios permanezcan más tiempo y regresen a su sitio web.

La comunicación con los clientes es uno de los elementos esenciales para mantener una buena UX. Por ejemplo, puede usar texto rojo para decirles a los usuarios que algo anda mal.

Los desarrolladores web pueden utilizar muchos otros métodos para comunicarse con los usuarios. En este artículo, exploraremos el método alert() y cómo se puede utilizar para comunicarse con los usuarios.

Usa window.alert() en React

El método alert() se utiliza a menudo para mostrar un mensaje al usuario. Este método muestra un cuadro de diálogo, que se puede utilizar haciendo clic en un botón.

El mensaje emergente aparece en el centro de la página y limita la capacidad de los usuarios para interactuar con su aplicación.

Resalta el mensaje en la alerta, por lo que el método debe usarse para comunicar algo importante. Sin embargo, los usuarios pueden continuar usando su aplicación cuando descartan el mensaje.

En un escenario ideal, window.alert() solo debería activarse y mostrar un mensaje emergente si algo anda mal. Si no hay errores significativos, puede usar otras formas menos contundentes para comunicarse con los usuarios.

El método toma un argumento, una cadena que representará el texto en el cuadro de alerta. No devuelve nada.

Para entender mejor cómo funciona alert(), veamos este ejemplo.

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

Si observa la demostración en vivo en codesandbox, verá que tenemos una aplicación simple con un campo de entrada y un botón para enviarla.

Aquí, importamos el enlace useState() para crear una variable de estado error y la función para actualizar su valor. Más adelante, comprobaremos esta variable de estado para decidir si alertar o no a los usuarios y decirles que introduzcan correctamente su correo electrónico.

Estableceremos la variable de estado en true de forma predeterminada porque enviar un campo vacío debería causar un error.

En la función validateField(), verificamos si el valor en la entrada de texto es un correo electrónico real y actualizamos la variable de estado error en consecuencia.

En concreto, comprobamos si la entrada de texto contiene el símbolo @, imprescindible para cualquier correo electrónico. Usamos el operador ternario para actualizar la variable de estado a true si no hay un símbolo @ en el campo de texto.

En caso contrario, pondremos la variable error en false.

También tenemos una función handleEmailSubmit(), que se ejecuta cuando el usuario hace clic en el botón de nuestra aplicación. Comprueba el valor de la variable de estado error, y si hay un error, llama a la función alerta().

En JSX, tenemos un contenedor <div> con dos elementos, <input> y <button>. La entrada de texto tiene un controlador de eventos onChange, que verificará si la entrada contiene el símbolo @ cada vez que cambie su valor y actualizará el valor de la variable error en consecuencia.

El controlador de eventos onClick del botón llama a la función handleEmailSubmit, que muestra una alerta si hay un error.