Вкладка "Reactjs Browser" Закрыть событие

Привет, я хочу знать, как закрыть сообщение на вкладке браузера. Я использую Reactjs.

handleWindowClose(){
    alert("Alerted Browser Close");
},
componentDidMount: function() {
    window.addEventListener('onbeforeunload', this.handleWindowClose);
},

componentWillUnmount: function() {
    window.removeEventListener('onbeforeunload', this.handleWindowClose);
}

вот что я пробовал добавить к моему компоненту реакции. Пожалуйста, расскажите мне, как двигаться дальше.

Ответы

Ответ 1

Вы сделали это правильно, кроме имени события и того факта, что предупреждение будет заблокировано в этом конкретном событии.

Вы можете показать сообщение следующим образом:

window.addEventListener("beforeunload", (ev) => 
{  
    ev.preventDefault();
    return ev.returnValue = 'Are you sure you want to close?';
});

Надеюсь, что это поможет.

Ответ 2

На фоне ответа хорошо сработал для меня.

Как я это использовал:

class MyComponent extends Component {
    // Things to do before unloading/closing the tab
    doSomethingBeforeUnload = () => {
        // Do something
    }

    // Setup the 'beforeunload' event listener
    setupBeforeUnloadListener = () => {
        window.addEventListener("beforeunload", (ev) => {
            ev.preventDefault();
            return this.doSomethingBeforeUnload();
        });
    };

    componentDidMount() {
        // Activate the event listener
        this.setupBeforeUnloadListener();
    }

    // Render method.
    render() {
        return (
            <div>My component</div>
        )
    }
}