Question

您好我想知道如何在浏览器选项卡上提示消息关闭。我正在使用Reactjs。

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

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

这是我尝试添加到我的反应组件中。请指导我如何继续进行。

Answer 1

您已完成的事件与事件名称以及警报将在该特定事件中被阻止的事实正确分开。

您可以显示以下消息：

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

希望这有帮助。

Answer 2

Amid的答案对我来说很有效。

我的使用方式：

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>
        )
    }
}

Answer 3

现在可以使用钩子来实现相同的功能。例如

 this.state = {
   images : [ 
     {id: 0, url: '...'},
     {id: 1, url: '...'},
     ...
   ]
 }

，然后在您的组件中使用：

import { useBeforeunload } from 'react-beforeunload';

尽管我们返回的是自定义字符串，但它会在此处显示浏览器的默认消息。

Answer 4

我需要在用户决定关闭选项卡后触发逻辑。这是我的解决方案（针对功能性反应组件和 TypeScript）：

useEffect(() => {
    window.addEventListener('beforeunload', alertUser)
    window.addEventListener('unload', handleTabClosing)
    return () => {
        window.removeEventListener('beforeunload', alertUser)
        window.removeEventListener('unload', handleTabClosing)
    }
})

const handleTabClosing = () => {
    removePlayerFromGame()
}

const alertUser = (event:any) => {
    event.preventDefault()
    event.returnValue = ''
}

alertUser 使用默认浏览器对话框警告用户。 handleTabClosing 在用户选择关闭选项卡时触发。

我的解决方案来自 Mike Pottebaum 的 this 博文

Reactjs浏览器选项卡关闭事件

4 个答案: