React コンポーネントのアンインストール、ルート ジャンプ、ページを閉じる (更新) 前にプロンプ​​トを実装する方法

この記事は React コンポーネントのアンインストール、ルートジャンプ、ページクローズ (更新) 前のプロンプトの実装方法に関するものです。必要な方は参考にしていただければ幸いです。あなたは助けてくれました。

React コンポーネントのアンロード ライフ サイクル、ルーティング ジャンプ、およびページの終了は多少似ていますが、実際には、現在のコンポーネントがビューポートから消えようとしていますが、実際にはトリガーされるイベントは同じではありません。同じ。実際のケースから始めましょう:

シングルページ アプリケーションの記事編集ページでユーザーが記事を編集していますが、その記事はまだ保存されていません。

ユーザーが誤って別のルートにジャンプした場合、このプロセスでルート ジャンプとコンポーネントのアンインストールをトリガーする必要があるため、ユーザーは誤ってタブを閉じるボタンをクリックしてしまいます。 、またはページを更新しました。このプロセスは、ページのアンロード イベントをトリガーします。

この場合、次のことを実装する必要があります。

1. ユーザーがページにジャンプすると、プロンプト ボックスが表示されます (ルーティングは履歴モードを採用します)

2. ユーザーがページを閉じるとプロンプト ボックスが表示されます

componentWillUnmount

まず、このフック関数はコンポーネントの前に呼び出される関数です。現在のコンポーネントのアンインストールは妨げられません。したがって、ここでプロンプトを表示しないでください。プロンプトが表示されても、コンポーネントはアンインストールされ、記事も表示されなくなります。

ルートガード-<プロンプト/>

最初の機能を実装するには、ルートにジャンプする前に判断が必要です。以前のルート ガードは

react-router-dom 4.0

以降にキャンセルされました (実際、私は以前のバージョンを勉強していません。この説明はインターネットから取得したものです)。 react-router-dom 4.0 以降では、<Prompt/> コンポーネントを利用してこの機能を実現できます。ドキュメントリンク↗このコンポーネントを記事編集ページコンポーネントの任意の部分に追加します

import {Prompt} from 'react-router-dom';
const Editor=()=>{
    return (
        <div>
          <Prompt
            when={true}
            message={location => '文章要保存吼，确定离开吗？'}
          />
        </div>
    )
}

ここで注意すべき点は、<Prompt/> を使用するとルートがジャンプすることです。 を通じて実装されるため、 には依存できません。

[キャンセル] をクリックすると、現在のページに留まります。これまでに、配線ジャンプ時に保存を促す機能を実装しました。

ウィンドウ終了イベント - beforeunload

2 番目の機能を実現するには、ウィンドウの監視に依存する必要があります。 React アプリケーションにおけるウィンドウ イベントの適用は、DOM イベントに比べてはるかに頻度が低いため、長い間遭遇していないため、まだ少し不慣れです。最も重要なことは、いつモニタリングを実行すべきかということです。

コンポーネントがマウントされている場合はイベントをリッスンする必要があり、コンポーネントがアンマウントされている場合はイベント監視を削除する必要があります。フックの新機能を本格的に取り入れ始めたので、ここでは useEffect を使用します。

import React,{useEffect} from 'react';

const Editor=()=>{

 //监听窗口事件
    useEffect(() => {
        const listener = ev => {
            ev.preventDefault();
            ev.returnValue='文章要保存吼，确定离开吗？';
        };
        window.addEventListener('beforeunload', listener);
        return () => {
            window.removeEventListener('beforeunload', listener)
        }
    }, []);
    
//return ...
}

ここで注意すべき点がいくつかあります:

1. useEffect の 2 番目のパラメーターは空の配列です。つまり、componentDidMount とcomponentWillUnmount の 2 つのフックのみが呼び出されます。 ##2 、イベントの監視と削除の 2 番目のパラメーターは同じイベント処理関数

3 です。beforeunload イベントの確認、プロンプト、アラートは無視されます。代わりに、組み込みのブラウザ ダイアログ ボックスがあります。 (参照:

MDN|beforeunload

)

4. returnValue が必要であり、これは空ではない文字列ですが、一部のブラウザではこの値はポップアップとして使用されません。メッセージ＃＃ ＃＃＃＃＃＃＃

以上がReact コンポーネントのアンインストール、ルート ジャンプ、ページを閉じる (更新) 前にプロンプ​​トを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。