2016-10-18 19 views
0

私はフォームで完了した情報が失われる別のセクションに移動しようとしているときにユーザーに警告する確認モーダル(反応確認を使用)を表示しようとしています。React:shouldComponentUpdateが非同期操作を待つ

JSの確認は、コードをブロックしないので、私はこれを行うことができます:

shouldComponentUpdate(nextProps, nextState) { 
     if (confirm('Hay cambios sin guardar, si continua se perderán. ¿Desea continuar?')) { 
      return true; 
     } else { 
      return false; 
     } 
} 

をしかし、私は結果を待つことができないライブラリに反応-確認のいずれかで確認方法を交換するときこの非同期操作。

async shouldComponentUpdate(nextProps, nextState) { 
    const response = await confirm('Hay cambios sin guardar, si continua se perderán. ¿Desea continuar?', { title: "Cambios sin guardar", okLabbel: "Sí", cancelLabel: "No!" }) 
     .then(
      () => { 
       return true; 
      }, 
      () => { 
       return false; 
      } 
     ); 
    return (response); 

}

私はこれを取得することができますどのように、誰もが知っていますか?

+1

あなたが別のセクションへのリンク/ボタンをクリックしたときに確認をなぜ呼び出さないのですか?成功コールバックでは、ユーザーを新しいセクションにリダイレクトすることができます。 – Saleel

+0

各セクションに異なるルートを使用していないため。コンポーネントが各セクションの情報のレンダリングを管理するので、shouldComponentUpdateを使用しようとしています。 – Marina

+0

したがって、別のセクションへの移行に伴う状態の変更があります。 shouldComponentUpdateにnextProps、nextStateパラメータがあるので、状態をチェックしてそれに応じてyesまたはnoを返すことができます。 – Saleel

答えて

0

私はアプリの構造を変えることになりました。私は別のルートで各セクションを管理します。したがって、コンポーネントではなくルーティングで確認を実装します。

0

この問題の別の方法を使用する必要があります。いずれかのボタンをクリックするか他のアクションは、モーダル/確認ウィンドウを表示します。 そして同様に、このウィンドウのためなeventHandlerを追加します。

_onClose(shouldUpdate) { 
    if(shouldUpdate) { 
    this.setState({}); // or this.forceUpdate() 
    } 
}