时间戳

首页 > 解决方案 > 在 React 中确认警报后 onDelete 不起作用

javascript - 在 React 中确认警报后 onDelete 不起作用

问题描述

在用户离开 React 页面之前，确认警报会显示。如果他们回答是，我想运行onDelete()。onDelete()如果他们也响应 NO ，则运行以下代码。

componentDidMount() {
  this.setupBeforeUnloadListener();
}

setupBeforeUnloadListener() {
  window.addEventListener("beforeunload", (event) => {
    event.returnValue = `Are you sure you want to leave?`;
    this.onDelete();
  })
}

onDelete()只有当用户在确认警报中响应“是”时，我才能运行。

标签： javascriptreactjs

解决方案

您可以尝试将unload事件与beforeunload. beforeunload会给用户取消卸载的机会，unload如果用户没有取消卸载，就会触发该事件。

请注意，大多数浏览器会忽略任何自定义提示字符串 https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload#Browser_compatibility

当此事件返回（或将 returnValue 属性设置为）非 null 或 undefined 的值时，将提示用户确认页面卸载。在旧浏览器中，事件的返回值显示在此对话框中。从 Firefox 44、Chrome 51、Opera 38 和 Safari 9.1 开始，将显示不受网页控制的通用字符串，而不是返回的字符串。例如：

Firefox 显示字符串“此页面要求您确认是否要离开 - 您输入的数据可能不会被保存。” （参见错误 588292）。Chrome 会显示字符串“您要离开此站点吗？您所做的更改可能无法保存。” （请参阅 Chrome 平台状态）。

此外，如果您的 onDelete() 函数执行任何异步操作，则不能保证完成。有关更多信息，请参阅此讨论：卸载事件之前使用的限制是什么？

推荐阅读