tengo un formulario Quiero mostrar una advertencia antes de desmontar el componente del formulario.
El componente es algo como esto:
import React from "react"; export default function FormComp() { const sub = (e) => { e.preventDefault(); const formData = new FormData(e.target); console.log(formData.get("name")); //API CALL HERE }; return ( <div className="test"> <form onSubmit={sub}> <input name="name" /> <button type="submit">Submit</button> </form> </div> ); } Si el componente se desmonta cuando el usuario va a una ruta diferente, ¿cómo puedo mostrar una advertencia de que los cambios del formulario no se guardarán (junto con la opción Sí y No)? Tan pronto como se desmonta el componente FormComp , se borran los datos del formulario.
¿Está utilizando el enrutador de reacción? Esto puede ser fácil con eso.
Si es así, entonces puedes hacer algo como esto:
import { Prompt } from 'react-router' const FormCompComponent = () => ( <> <Prompt when={formIsHalfFilledOut} message='You have unsaved changes, are you sure you want to leave?' /> {/* Component JSX here */} </> )Para obtener más detalles, consulte esto: https://v5.reactrouter.com/core/api/Prompt