我正在尝试在我的应用程序中实现一项功能，当用户尝试离开未提交的表单时，他们会收到确认信息，询问他们是否确定要在保存更改之前离开。
该componentWillUnmount方法似乎是这样，因为它会火的所有不同的方式，用户可能会放弃的形式完美的候选人（改变，导致它消失父组件状态，导航到不同的路线，等等...）。但是......当确认返回false时，我无法阻止卸载。
关于我如何实施这一点的任何建议？
如何防止在 React Components 中卸载？
IT技术
javascript
reactjs
2021-05-02 07:38:14
3个回答
这最好通过 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指示是否应该显示阻止提示。您可以在 react-router 网站上找到完整的演示
此方法适用于BrowserRouterand HashRouter，但如果您使用的是MemoryRouter，则需要创建如下所示的路由器，然后在组件中使用 Prompt ：
<MemoryRouter
getUserConfirmation={(message, callback) => {
callback(window.confirm(message));
}}
>
{/* Your App */}
</MemoryRouter>
您需要手动传递getUserConfirmation作为函数的prop。
您可以在任何路由器（浏览器、内存或哈希）中根据需要修改此函数以创建自定义确认对话框（例如模式），而不是使用浏览器的默认confirm.
我不建议在 componentWillUnmount 中这样做。我通常想在商店中这样做（如果您使用的是通量架构）。它通常是需要跟踪所有数据的存储。componentWillUnmount 函数是您想要卸载商店侦听器。