我确定我缺少相对简单的东西-但是我一生中找不到答案。尝试在中进行防止重载时，按浏览器菜单（Chrome）中的重载按钮时react，我的onbeforeunload功能无法启动。如果我按CMD + R / F5键，并且一旦完成一次，它就会起作用-浏览器按钮也会触发该功能。如果我尝试先单击“重新加载”，它根本不起作用。此外，如果我一次浏览路由器，它似乎也会注册。我正在使用以下代码在顶层模板上注册刷新：
class Template extends React.Component {
constructor(props) {
super(props);
}
refreshPrevent = (e) => {
e.preventDefault();
e.returnValue = true;
}
componentDidMount() {
console.log("registering refresh handlers");
window.addEventListener("beforeunload", this.refreshPrevent );
}
componentWillUnmount() {
window.removeEventListener("beforeunload", this.refreshPrevent);
}
任何想法，将不胜感激。
在您的代码中看不到任何错误。我在我的react应用程序中使用了类似的代码，但是直到您发布为止，我才测试过此特定问题。
根据MDN文档，此行为似乎是正常的：
为了消除不必要的弹出窗口，除非与页面进行了交互，否则某些浏览器不会显示在beforeunload事件处理程序中创建的提示。而且，有些根本不显示它们。
因此，当您的应用首次加载时，直到您以某种方式与页面交互之前，您可以单击浏览器刷新按钮，并且取决于浏览器，页面将重新加载而不显示提示。
但是，一旦使用鼠标或键盘或通过触摸在页面上完成了某些操作，就会显示提示。
MDN文档的结论是（强调）：
还要注意，各种浏览器都忽略事件的结果，根本不要求用户进行确认。在这种情况下，文档将始终自动被卸载。Firefox在about：config中有一个名为dom.disable_beforeunload的开关来启用此行为。从Chrome 60开始，如果用户自加载框架或页面以来未在其中执行手势，则该确认将被跳过。
这符合我们期望某些情况的规范，例如页面未交互以及刷新，从而跳过了提示用户的操作：
鼓励用户代理避免要求用户进行确认，如果它认为这样做会令人讨厌，欺骗或毫无意义。一个简单的试探法可能是，如果用户尚未与文档进行交互，则用户代理在卸载文档之前不会要求确认。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句