Javascript 如何防止React组件中的卸载？

我正在尝试在我的应用程序中实现一个功能，当用户试图离开未提交的表单时，他们会得到一个确认，询问他们是否确定要在保存更改之前离开

componentWillUnmount方法似乎是这方面的最佳选择，因为它将触发用户可能放弃表单的所有方式（更改导致表单消失的父组件状态、导航到其他路径等）。然而。。。当确认返回false时，我无法阻止卸载

---

关于如何实现这一点有什么建议吗？

我不建议在componentWillUnmount中这样做。我通常希望在商店中这样做（如果您使用的是flux架构）。通常是存储需要跟踪所有数据。componentWillUnmount函数是您希望卸载存储侦听器的函数。

这最好通过react router:SetRouteLaveHook处理

componentWillMount() {
    this.unregisterLeaveHook = props.router.setRouteLeaveHook(props.route, this.routerWillLeave.bind(this));
}

routerWillLeave(nextLocation) {
  return false;        
}

当卸载组件时，注销左钩子：

componentWillUnmount() {
    this.unregisterLeaveHook();
}

使用可以通过使用

提示符

轻松防止路由更改（这将防止组件卸载）

import { Prompt } from 'react-router';

const BlockingComponent = ({ isBlocking }) => (
  <div>
    <Prompt
      when={isBlocking}
      message={location =>
        `Are you sure you want to go to ${location.pathname}`
      }
    />
    {/* Rest of the JSX of your component */}
  </div>
);

您需要手动传递

getUserConfirmation

prop，这是一个函数。

---

您可以在任何路由器（浏览器、内存或哈希）中随意修改此函数，以创建自定义确认对话框（例如模式），而不是使用浏览器的默认

确认

可能重复的功能。我确信您可以使用函数否，您不能！您只更新视图上的组件！只有当你更新浏览器路径，而不是Demon之后的参数时，我们才能工作。事实上，我找到了实现我想要的东西的其他方法，没错，它不使用componentWillUnmount。谢谢你的回答。没问题。：）aa你采用了什么解决方案？@JoshuaNavarroRuíz:什么解决方案？我刚刚看到了类似的情况，谢谢你的回答，对我来说效果很好。你能详细解释一下吗？我想防止卸载条件ALLYIT执行URL缺陷-当出现提示窗口时-它将URL字符串更改为上一个。然后你点击“取消”按钮，出现了一个惊喜——URL是否可以更改回来。但你会停留在当前页面上，没关系。这个问题来自2017年，似乎仍未解决

<MemoryRouter
  getUserConfirmation={(message, callback) => {
    callback(window.confirm(message));
  }}
>
  {/* Your App */}
</MemoryRouter>