¿Cómo evitar el comportamiento predeterminado en una devolución de llamada de evento en ReactJS?

Ciertos eventos en Javascript tienen acciones predeterminadas asociadas con ellos . Por ejemplo, hacer clic en una etiqueta de anclaje lleva al usuario a la ruta especificada en el atributo href. Un elemento de formulario puede tener un evento de envío que se invoca a través de un botón de tipo «enviar». Esto hará que el navegador se actualice cada vez que se haga clic en el botón . Si bien esto era necesario en el pasado para permitir que el backend procesara los datos, la mayoría de las aplicaciones web modernas no necesitan un navegador para recargar cada vez que se envía un formulario. 

A menudo, los desarrolladores pueden optar por ejecutar su propio comportamiento definido , es decir, evitar que el navegador se vuelva a cargar innecesariamente. Averigüemos cómo hacerlo.

Creación de la aplicación React: antes de continuar con el enfoque, debemos crear una aplicación React.

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app myapp

Paso 2: después de crear la carpeta de su proyecto, es decir , myapp , acceda a ella con el siguiente comando:

cd myapp

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura de la carpeta inicial 

Paso 3: ahora que tenemos el proyecto configurado, reemplacemos el contenido de App.js , ubicado dentro de la carpeta src , con el siguiente código: 

import React, { useState } from "react";
  
function App() {
  const [name, setName] = useState("");
  
  const handleSubmit = () => {
    alert("There will be a browser reload once the alert box is closed.");
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={name}
        placeholder="Name"
        onChange={(e) => setName(e.target.value)}
      />
      <button type="submit">Click</button>
    </form>
  );
}
  
export default App;

Tenemos un elemento de formulario con un evento de envío, envolviendo un botón. Cuando se hace clic en el botón, se activa la función handleSubmit .

Paso 4: use el siguiente comando para ejecutar la aplicación en modo de desarrollo y abra http://localhost:3000 para verla en el navegador:

npm start

Podemos ver claramente que cada vez que se hace clic en el botón, aparece una alerta, y cuando cerramos la alerta, el navegador se actualiza por sí solo.

El navegador se actualiza solo

Podemos evitar este comportamiento predeterminado haciendo una pequeña modificación en la definición de la función handleSubmit . Llamamos a preventDefault en el evento al enviar el formulario, y esto cancelará el comportamiento predeterminado del evento (actualización del navegador) y nos permitirá ejecutar cualquier código que escribamos dentro de handleSubmit.

Por lo tanto, el código de App.js ahora se convierte en:

import React, { useState } from "react";
  
function App() {
  const [name, setName] = useState("");
  
  const handleSubmit = (event) => {
    event.preventDefault();
    alert("The browser will not reload when the alert box is closed.");
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={name}
        placeholder="Name"
        onChange={(e) => setName(e.target.value)}
      />
      <button type="submit">Click</button>
    </form>
  );
}
  
export default App;

Este es el nuevo comportamiento:

¡Sin actualizaciones automáticas!