Question

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

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

关于如何实施此建议的任何建议？

Answer 1

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

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

routerWillLeave(nextLocation) {
  return false;        
}

卸载组件后，取消注册离开钩子：

componentWillUnmount() {
    this.unregisterLeaveHook();
}

Answer 2

我不建议在componentWillUnmount中执行此操作。我通常想在商店里做这件事（如果你使用的是通量架构）。通常是商店需要跟踪所有数据。您希望卸载store侦听器的componentWillUnmount函数。

Answer 3

使用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，指示是否应显示阻止提示。您可以找到完整的demo on react-router website

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

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

您需要手动传递getUserConfirmation这个函数。
您可以在任何路由器（浏览器，内存或哈希）中随意修改此功能，以创建自定义确认对话框（例如模式对话框），而无需使用浏览器的默认confirm。

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

3 个答案: