Borrar el formulario después de enviarlo en React

Actualmente, los sitios web tienen que competir entre sí para captar la atención de los usuarios. Los usuarios no quieren pensar demasiado en descubrir cómo usar una aplicación.

Elegir React como su marco es un buen comienzo porque las aplicaciones React son increíblemente rápidas.

Borrar el formulario después de enviarlo en React

La mayoría de las aplicaciones de React usan formularios de una forma u otra. Aunque React se basa en JavaScript, los formularios en las aplicaciones web de React se manejan de manera diferente que en otros marcos o JavaScript nativo.

Necesita conocer algunos detalles específicos de React para implementar con éxito formularios en React.

Este artículo discutirá el caso de uso cuando necesite borrar el contenido del formulario después de enviarlo. Por ejemplo, si los usuarios tienen que enviar una tarea pendiente, una vez que se completa y envía, el formulario debe borrarse para que los usuarios puedan comenzar a escribir en una pizarra limpia.

Componentes controlados

Antes de analizar cómo borrar formularios una vez que se envían, debemos explicar el concepto de componentes controlados. Esto es cuando el estado controla el valor de la entrada.

Por ejemplo, podemos configurar el controlador de eventos onChange para la entrada <texto> para actualizar el estado cada vez que el usuario ingresa o elimina una nueva letra.

Tendremos que borrar las entradas del usuario enviadas actualmente en el estado al enviar el formulario. Esto no significa que eliminaremos todo el estado, solo los valores de los campos de texto temporales vinculados al estado.

Ejemplo de formulario de compensación después de enviar

Este es un ejemplo simple en el que borramos el formulario después de enviarlo.

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

Como puede ver en esta demostración en vivo, tenemos una entrada de texto simple donde se supone que los usuarios deben ingresar sus nombres. También tenemos un botón llamado Agregar nombre.

Cada vez que el usuario ingresa un nombre en el campo y hace clic en el botón, ese nombre se mostrará en la lista y el campo de entrada se borrará.

Usamos el hook useState() para crear dos variables de estado: name y names y las funciones correspondientes para actualizarlas.

El valor de la variable de estado nombre estará vinculado al campo de entrada. Cualquier letra nueva ingresada en el campo actualizará el valor de la variable de estado nombre.

La variable de estado nombres se inicializará como una matriz vacía. Configuraremos el controlador de eventos handleClick para que cada vez que el usuario haga clic en ese botón, el valor actual ingresado en el campo de texto se agregue a la matriz.

Lo que es más importante, en la función handleClick(), usaremos la función setName() para restablecer el valor de la variable de estado name a una cadena vacía. Dado que el valor en el campo de entrada de texto está vinculado a la variable de estado, estará vacío (para reflejar una cadena vacía).