0

deseo saber como detectar que un usuario haya presionado F5 o actualizar en su navegador mientras está en cierta dirección de la página que estoy desarrollando con React, esto con el fin de mostrar una ventana de confirmación y ejecutar algunas funciones dependiendo de la respuesta del usuario (confirmar actualizar página o cancelar la actualización de la página).

Encontré este código y probé ponerlo dentro de mi functional component con React:

import React from 'react';

const MyComponent = () => {

window.onbeforeunload = function() {
    const isOK = confirm('Message');
    if (confirm('Successful Message')) {
        window.location.reload();
    }
    return '¿Desea recargar la página web?';
  };

return <div>Hola</div>

}

export default MyComponent;

La estructura del componente es solo de ejemplo de donde estoy poniendo la función con window.onbeforeunload.

Pero nunca se ejecuta cuando actualizo la página con el navegador.

Edito: he probado la función con solo:

window.onbeforeunload = function() {
    return '¿Desea recargar la página web?';
};

Esto funciona, ¿cómo puedo personalizar ese mensaje y ejecutar acciones dependiendo cual botón presione?

introducir la descripción de la imagen aquí

1 respuesta 1

1

usando window.onbeforeunload esta correcto, lo que te esta pasando es porque al no ponerlo en un useEffect el código se esta ejecutando el código cada vez que el componente se tiene que refrescar

import React, { useEffect } from 'react';

const MyComponent = () => {

  useEffect(() => {
    const onUnload = () => "¿Quieres salir?";

    window.addEventListener("beforeunload", onUnload);

    return () => window.removeEventListener("beforeunload", onUnload);
  }, []);

  return <div>Hola</div>

}

export default MyComponent;
3
  • ¿En dónde puedo agregar funciones para que se ejecuten al presionar "Volver a cargar" o "Cancelar"?
    – V0LT3RR4
    el 16 ene. 2020 a las 18:21
  • no puedes agregar funciones ahi, solo puedes cambiar el texto el 16 ene. 2020 a las 20:46
  • Probé eso que pusiste y nunca salía el mensaje. Necesito ejecutar funciones, como para guardar datos antes de que se actualice la página.
    – V0LT3RR4
    el 16 ene. 2020 a las 21:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.