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

在用户将要从React中的页面移出之前，将显示确认警报。如果他们回答“是”，则我要运行onDelete()。如果以下代码也响应，则它们将运行onDelete()。

componentDidMount() {
  this.setupBeforeUnloadListener();
}

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

仅当用户在确认警报中回答“是”时，才能运行onDelete()。

最佳答案

您可以尝试将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（）函数执行异步操作，则不能保证它完成。有关更多信息，请参见此讨论：What are the limitation using before unload event?

关于javascript - 在React中确认警报后onDelete不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/61520467/