Estoy trabajando en un formulario dinámico donde el formulario se envía automáticamente cuando se completan todos los campos obligatorios. No tenemos ningún botón de envío en el formulario. Ahora supongamos que un usuario completó algunos de los campos del formulario e intenta salir del formulario haciendo clic en cualquier enlace de navegación en la aplicación, debemos advertir al usuario con una ventana emergente que muestra el mensaje " Tienes cambios sin guardar. Navegando fuera de esto view revertirá estos cambios. Esta acción no se puede deshacer. ¿Está seguro de que desea continuar? ". Ahora, si el usuario hace clic en continuar , se redirigirá a la página navegada y si hace clic en cancelar , permanecerá en la misma página (formulario).
Aquí estamos usando ReactJS pero no usamos ningún enrutamiento de reacción en la aplicación. Hemos intentado todas las formas posibles pero no pudimos encontrar ninguna solución. ¿Alguien se ha enfrentado a este escenario antes o tiene alguna idea de cómo abordar el problema?
Puede usar la API nativa del navegador beforeUnload .
... const beforeunload = (e) => { // You can add logic for confirmation here. if (dataUnsaved) { e.preventDefault(); e.returnValue = true; } } useEffect(() => { window.addEventListener('beforeunload', beforeunload); return () => { window.removeEventListener('beforeunload', beforeunload); } }, []) return ( ... ) ...