我試圖在我的應用中實現一項功能,當用戶嘗試從未提交的表單導航時,他們會得到一個確認,詢問他們是否確定要在保存更改前離開。如何防止在React組件中卸載?
的componentWillUnmount方法似乎是這樣,因爲它會火爲所有用戶可以拋棄形式的各種方法完美的候選人(改變,導致它消失父組件狀態,導航到不同的路線,等...)。但是...當確認返回錯誤時,我無法阻止卸載。
關於如何實現這一點的任何建議?
我試圖在我的應用中實現一項功能,當用戶嘗試從未提交的表單導航時,他們會得到一個確認,詢問他們是否確定要在保存更改前離開。如何防止在React組件中卸載?
的componentWillUnmount方法似乎是這樣,因爲它會火爲所有用戶可以拋棄形式的各種方法完美的候選人(改變,導致它消失父組件狀態,導航到不同的路線,等...)。但是...當確認返回錯誤時,我無法阻止卸載。
關於如何實現這一點的任何建議?
這最好通過react-router:setRouteLeaveHook來處理。
componentWillMount() {
this.unregisterLeaveHook = props.router.setRouteLeaveHook(props.route, this.routerWillLeave.bind(this));
}
routerWillLeave(nextLocation) {
return false;
}
當組件卸載,註銷假鉤:
componentWillUnmount() {
this.unregisterLeaveHook();
}
我剛剛看到類似的東西,謝謝你的回答,它對我很好 –
我不會推薦在componentWillUnmount中這樣做。我通常希望在商店中做到這一點(如果您使用的是流量架構)。通常需要跟蹤所有數據的商店。 componentWillUnmount函數是你想要卸載存儲監聽器的。
**惡魔**,實際上我發現了其他方式來實現我想要的,這是正確的,它不使用** componentWillUnmount **。感謝您的回答。 –
沒問題。 :) aa – Demon
你用什麼解決方案? –
的可能的複製[?我如何防止卸載/重新安裝一個組分反應(http://stackoverflow.com/問題/ 33151563/how-can-i-prevent-react-from-unmounting-remounting-a-component) – orvi
我相信你可以使用['window.beforeunload'](https://developer.mozilla.org/ en-US/docs/Web/Events/beforeunload)功能 –
不,你不能!您只更新視圖上的組件!只有當你更新瀏覽器路由時,我們纔會工作,而不是# –