如何防止 React Components 中的卸载？

Question

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

componentWillUnmount 方法似乎是完美的候选者，因为它会触发用户可能放弃表单的所有各种方式（更改导致它消失的父组件状态，导航到不同的路线，等等……）。但是…当确认返回 false 时，我无法阻止卸载。

关于如何实施这个的任何建议？

原文由 Joshua Navarro Ruíz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这最好通过 react-router 处理：setRouteLeaveHook。

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

routerWillLeave(nextLocation) {
  return false;
}

当组件被卸载时，取消注册 leave hook：

 componentWillUnmount() {
    this.unregisterLeaveHook();
}

原文由 vijayst 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用 react-router ，您可以通过使用 Prompt 轻松防止路由更改（这将防止组件卸载）。

 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>
);

这里 isBlocking 应该是 bool 指示是否应显示阻止提示。你可以 在 react-router 网站上找到完整的演示

此方法适用于 BrowserRouter 和 HashRouter ，但如果您使用的是 MemoryRouter ，则需要创建如下所示的 Prot 组件：

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

您需要手动传递 getUserConfirmation ，这是一个函数。

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

原文由 Vaibhav Vishal 发布，翻译遵循 CC BY-SA 4.0 许可协议