Facebook如何为其应用程序中未保存的更改显示自定义模式窗口

Question

我对使用React的解决方案感兴趣。我只能找到显示浏览器级别警告的示例，但无法找到在用户离开带有未保存数据的页面时显示自定义模式窗口的示例。

Answer 1

全局windows对象上存在一个名为onbeforeunload的事件。

componentDidMount() {
window.addEventListener('onbeforeunload', () => {
//show your React modal
this.setState({ isModalShown: true });
if (this.state.choose) {
return undefined;
}
});
}
render() {
return  (
<Modal open={this.state.isModalShown}>
<p>Do you wish to continue?</p>
<button onClick={() => this.setState({ choose: true })}>Cancel</button>
<button onClick={() => this.setState({ choose: false })}>Ok</button>
</Modal>
);
}

注意浏览器支持，因为并非所有浏览器的行为都相同https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload

很有可能，facebook的解决方案是相当先进的，并使用不同浏览器的变通方法。