2016-07-20 15 views
4

私はReduxアプリケーションを構築しています。私は、データを保存せずにComponentを終了したい場合、またはトランジションをキャンセルして保存しておきたい場合、ユーザーに確認を求めます。ComponentWillUnmountのビアダイアログボックスで確認後に反応ルータの遷移をキャンセル/許可する

たとえば、コンポーネントのマウントを停止する方法はありますか?

答えて

5

良い方法は、あなたがすでにreact-routerを使用している場合は、次のrouterWillLeaveフックを作成することです。

export default withRouter(MyComponent); 

https://github.com/reactjs/react-router/blob/master/docs/guides/ConfirmingNavigation.mdでドキュメントを参照してください:として

componentDidMount() { 
    this.props.router.setRouteLeaveHook(this.props.route, this.beforeUnload); 
} 

routerWillLeave(e) { 
    // check for a condition here 
    if (this.state.allowLeave === false) { 
    const message = 'Are you sure?'; 
    (e || window.event).returnValue = message; 
    return message; 
    } 
} 

また、必ずthis.props.routerが利用できるようにするために、あなたはあなたのコンポーネントをエクスポートする必要があります。

+0

ありがとうございました!私は上記の方法を試して、それは次のエラーを投げている createTransitionManager.js?aa7a:133未知のタイプエラー:未定義のプロパティ '\ _ \ _ id \ _ \ _'を読み取ることができません –

+0

@RamanChoudharyあなたのコード。どこでも 'id'を導入していません。 – activatedgeek

+0

このエラーは、createTransitionManager.jsから来ています。未定義のプロパティ '\ _ \ _ id \ _ \ _'を読み取ることができません。これは、ページコンポーネントの直接の子です:<名前=「microtaskId」コンポーネント= {ページ} /ルートパス=「microtaskId /マイクロタスク/」> ' ところで、私が言及するのを忘れて、これは直接 'に接続されていません。 –

1

コンポーネントをアンマウントできないようにする方法はありません。 window.onbeforeunloadを使用すると、ユーザーが現在のタブを閉じて、バックグラウンドでデータをcomponentWillUnmountに保存しないようにすることができます。それは私のアプリでそれを行う方法です。

undefined以外のものが返された場合、確認ポップアップが表示されます。

window.onbeforeunload =() => 'Are you sure?'; 
関連する問題