Comment empêcher la double confirmation en chrome avec les événements 'onbeforeunload' en cours de réaction

Question

Je souhaite inviter les utilisateurs à confirmer avant de quitter une page.

J'ai ajouté et écouteur d'événement dans componentDidMount:

componentDidMount() { 
    window.addEventListener('beforeunload', this.onUnload) 
} 

Puis je l'ai écrit l'événement que je veux arriver:

onUnload(e) { 
    var message = "Random message to trigger the browser's native alert." 
    e.returnValue = message 
    return message 
    } 

Puis-je lié l'événement dans le constructeur:

constructor(props) { 
    super(props) 
    this.onUnload = this.onUnload.bind(this) 
    } 

Et finalement j'ai enlevé l'écouteur d'événement sur démonter:

componentWillUnmount() { 
    window.removeEventListener('beforeunload', this.onUnload) 
    } 

Tout semble fonctionner correctement. Je reçois le message suivant quand je tente de fermer l'onglet en chrome:

Le problme est que je reçois aussi une invite de reload après avoir choisi l'une des options:

Comment puis-je me débarrasser de la deuxième invite? Qu'est-ce que je fais mal?

Answer 1

Vous pouvez déplacer window.removeEventListener la méthode onUnmount pour vous assurer qu'elle est appelée. Donc quelque chose comme ceci devrait fonctionner:

onUnload(e) { 
    window.removeEventListener('beforeunload', this.onUnload) 

    var message = "Random message to trigger the browser's native alert." 
    e.returnValue = message 
    return message 
} 

Answer 2

essayer d'ajouter e.preventDefault() dans onUnload