我正在尝试在我的应用中实现一项功能，当用户尝试离开未提交的表单时，他们会收到确认，询问他们是否确定要离开，然后再保存他们的变化。
componentWillUnmount 方法似乎是完美的候选，因为它会触发用户可能放弃表单的所有各种方式（更改导致其消失的父组件状态，导航到不同的路线等...）。但是...当确认返回 false 时，我无法阻止卸载。
关于如何实现这一点有什么建议吗？
【问题讨论】：
window.beforeunload函数
标签： javascript reactjs
最好通过 react-router: setRouteLeaveHook 处理。
componentWillMount() {
this.unregisterLeaveHook = props.router.setRouteLeaveHook(props.route, this.routerWillLeave.bind(this));
}
routerWillLeave(nextLocation) {
return false;
}
当组件被卸载时，注销离开钩子：
componentWillUnmount() {
this.unregisterLeaveHook();
}
【讨论】：
使用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，则需要按如下所示创建路由器，然后在组件中使用提示：
<MemoryRouter
getUserConfirmation={(message, callback) => {
callback(window.confirm(message));
}}
>
{/* Your App */}
</MemoryRouter>
您需要手动传递 getUserConfirmation 属性，这是一个函数。
您可以在任何路由器（浏览器、内存或哈希）中随意修改此功能，以创建自定义确认对话框（例如模式），而不是使用浏览器的默认 confirm。
【讨论】：
我不建议在 componentWillUnmount 中这样做。我通常想在商店里这样做（如果你使用的是通量架构）。通常是商店需要跟踪所有数据。 componentWillUnmount 函数是您想要卸载存储侦听器的功能。
【讨论】：