この記事では、Context を介して DOM 要素の ref を子コンポーネントに渡すときに、React アプリケーションでフォーカス イベントを正しく処理する方法について説明します。 Blur イベントがバブルアップせず、その結果、親要素上で焦點の合っていない子要素をキャプチャできなくなるという問題に対応して、この記事では、解決策として focusout イベントを使用することを提案し、イベント リスナーの正しい設定とクリーンアップを確実にするための詳細なコード例と説明を提供します。

React Context と Ref を組み合わせたアプリケーションを理解する

React では、ref は DOM ノードまたはコンポーネント インスタンスにアクセスする方法です。複數(shù)のコンポーネント間で DOM 要素の ref を共有する必要がある場合、React Context は効率的で簡潔なメカニズムを提供します。たとえば、親コンポーネントが DOM 要素の ref を持ち、その子コンポーネントがこの ref に基づいてイベント リスナーの追加などの特定の操作を実行することを望む場合があります。

次のシナリオを考えてみましょう。 EditorProvider コンポーネントが div 要素の ref を管理し、それを Context を通じて使用するコンポーネントに公開します。

 import React, { useRef, useContext, useMemo } from 'react';

// Context インターフェイスのタイプを定義 EditorContextProps {
    履歴狀態(tài): 任意; // たとえば、特定の型は実際のニーズに応じて定義されます ref: React.RefObject<htmldivelement>;
}

// コンテキストを作成する
const EditorContext = React.createContext<editorcontextprops>(未定義);

// コンテキストの利用を容易にするためにフックをカスタマイズします
エクスポート関數(shù) useEditorContext(): EditorContextProps {
    const context = useContext(EditorContext);
    if (コンテキスト === 未定義) {
        throw new Error('useEditorContext は EditorProvider 內で使用する必要があります');
    }
    コンテキストを返します。
}

// EditorProvider コンポーネントのエクスポートのデフォルト関數(shù) EditorProvider({ Children }: { Children: React.ReactNode }) {
    const ref = useRef<htmldivelement>(null); // 參照を作成する
    const HistoryState = useMemo(() => ({ /* 初期狀態(tài) */ }), []); // 例 const context = {historyState, ref };

    戻る （
        <editorcontext.provider>
            <div ref="{ref}"> {/* ref を DOM 要素にバインドします*/}
                {子供たち}
            </div>
        </editorcontext.provider>
    );
}</htmldivelement></editorcontextprops></htmldivelement>

上記のコードは、EditorProvider を通じて HTMLDivElement の參照を共有する方法を示しています。使用側コンポーネント (Lexical プラグインなど) は、useEditorContext フックを通じてこの ref を取得できます。

ブラーイベントの制限とフォーカスアウトの利點

使用するコンポーネントがこの共有參照で焦點の合っていないイベントをリッスンしようとするとき、よくある誤解は、blur イベントを使用することです。

 import React, { useEffect, useCallback } from 'react';
import { useEditorContext } から './EditorProvider'; // パス関數(shù) MyLexicalPlugin() を想定します {
    const { ref } = useEditorContext();

    const BlurHandler = useCallback((イベント: FocusEvent) => {
        console.log('ぼやけた');
        // デフォーカスロジックをここで処理します}, []);

    useEffect(() => {
        const 要素 = ref.current;
        if (要素) {
            // エラーのデモ: ブラーイベントはバブルしません element.addEventListener('blur', BlurHandler, false);
        }

        return() => {
            if (要素) {
                element.removeEventListener('blur', BlurHandler);
            }
        };
    }, [ref.current, BlurHandler]); // 依存関係には ref.current が含まれます

    null を返します。 // プラグインは通常、DOM をレンダリングしません。
}

上記のコードでは、特に ref が指す div 內の子要素からフォーカスが離れると、blurHandler が期待どおりにトリガーされないことがあります。これは、ブラー イベントがバブルアップしないためです。これは、フォーカスが子要素から離れた場合、blur イベントはその子要素でのみトリガーされ、その親要素 (つまり、ref 経由で參照した div) には伝播されないことを意味します。

この問題を解決するには、 focusout イベントを使用する必要があります。 focusout イベントは Blur イベントに似ており、どちらも要素がフォーカスを失ったことを示しますが、主な違いはfocusout イベントがバブルアップすることです。 focusout イベントは、要素自體またはその子孫がフォーカスを失ったときに要素でトリガーされます。これは、親要素上の子要素のフォーカス外の動作を監(jiān)視するのに最適です。

focusout イベントを使用して、正しい焦點外れの監(jiān)視を実裝します。

問題を解決するには、useEffect の Blur イベントを focusout に置き換えます。

 import React, { useEffect, useCallback } from 'react';
import { useEditorContext } から './EditorProvider'; // パス関數(shù) MyLexicalPlugin() を想定します {
    const { ref } = useEditorContext();

    const BlurHandler = useCallback((イベント: FocusEvent) => {
        console.log('ぼやけているか、フォーカスが子要素から移動しました');
        // デフォーカスロジックをここで処理します}, []);

    useEffect(() => {
        const 要素 = ref.current;
        if (要素) {
            // 正しいアプローチ: focusout イベントを使用すると、バブルが発生します element.addEventListener('focusout', BlurHandler);
        } それ以外 {
            戻る; // 要素が存在しない場合は何も実行されません。}

        // クリーンアップ関數(shù): コンポーネントがアンインストールされたとき、または依存関係が変更されたときにイベント リスナーを削除します return () => {
            if (element) { //念のため、要素が存在するかどうかを再度確認します element.removeEventListener('focusout', BlurHandler);
            }
        };
    }, [ref.current, BlurHandler]); // 依存関係には ref.current と BlurHandler が含まれます

    null を返します。
}

コード分??析と注意事項:

1. useCallback はイベント ハンドラー関數(shù)をラップします。blurHandlerは useCallback によってラップされます。これにより、ref.current が変更されない限り、各レンダリング中に BlurHandler の參照が安定したままになります。これは、useEffect の依存関係の最適化において、不要なイベント リスナーの再登録を避けるために非常に重要です。
2. useEffect の依存関係:
   • ref.current: useEffect は、ref が指す DOM 要素が変更されると再実行されます (これは通常 EditorProvider では起こりませんが、ベスト プラクティスとしてこれを含める必要があります)。
   • BlurHandler: useCallback を使用しますが、blurHandler が內部的に外部変數(shù)に依存しており、これらの変數(shù)が変更されると、blurHandler の參照も変更されます?，F(xiàn)時點では、新しいイベント処理関數(shù)を登録するために useEffect を再実行する必要があります。
3. クリーンアップ関數(shù): useEffect によって返される関數(shù)はクリーンアップ関數(shù)です。これは、コンポーネントがアンロードされるとき、または useEffect の依存関係が変更されて再実行される前に実行されます。ここでは、メモリ リークを防ぐために、以前に追加した focusout イベント リスナーを削除しました。
4. focusout と focusin:同様に、focusin イベントは focus イベントのバブリング バージョンです。親要素上の子要素のフォーカス取得動作を監(jiān)視する必要がある場合は、focusin を使用できます。
5. 條件チェック: useEffect 內で、ref.current が null かどうかを常にチェックします。コンポーネント実裝の初期段階では、ref.current にまだ値が割り當てられていない可能性があります。

要約する

React では、Context を介した ref の共有は、複雑なコンポーネント間の DOM インタラクションを管理するための強力なパターンです。これらの共有參照でフォーカス イベントをリッスンする場合、blur と focusout (または focus と focusin) の違いを理解することが重要です。 focusout イベントのバブリングの性質により、親要素上の子要素のフォーカスが外れた動作をキャプチャするのに最適です。 useEffect と useCallback を正しく使用すると、メモリ リークのない堅牢なイベント リスニング メカニズムを構築できます。

以上がReact の Context を介して Ref を管理し、フォーカス イベントを処理するための実踐的なガイドの詳細內容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。