本文探討了在React應(yīng)用中，當(dāng)通過(guò)Context將DOM元素的ref傳遞給子組件時(shí)，如何正確處理焦點(diǎn)事件。針對(duì)blur事件不冒泡導(dǎo)致無(wú)法在父元素上捕獲子元素失焦的問(wèn)題，文章提出了使用focusout事件作為解決方案，并提供了詳細(xì)的代碼示例和解釋，以確保事件監(jiān)聽器的正確設(shè)置和清理。

理解React Context與Ref的結(jié)合應(yīng)用

在React中，ref是訪問(wèn)DOM節(jié)點(diǎn)或組件實(shí)例的一種方式。當(dāng)我們需要在多個(gè)組件之間共享一個(gè)DOM元素的ref時(shí)，React Context提供了一種高效且簡(jiǎn)潔的機(jī)制。例如，一個(gè)父組件可能擁有一個(gè)DOM元素的ref，并希望其子組件能夠基于此ref執(zhí)行某些操作，如添加事件監(jiān)聽器。

考慮以下場(chǎng)景：一個(gè)EditorProvider組件管理一個(gè)div元素的ref，并通過(guò)Context將其暴露給消費(fèi)組件。

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

// 定義Context的類型
interface EditorContextProps {
    historyState: any; // 示例，具體類型根據(jù)實(shí)際需求定義
    ref: React.RefObject<htmldivelement>;
}

// 創(chuàng)建Context
const EditorContext = React.createContext<editorcontextprops undefined>(undefined);

// 自定義Hook，方便消費(fèi)Context
export function useEditorContext(): EditorContextProps {
    const context = useContext(EditorContext);
    if (context === undefined) {
        throw new Error('useEditorContext must be used within an EditorProvider');
    }
    return context;
}

// EditorProvider組件
export default function EditorProvider({ children }: { children: React.ReactNode }) {
    const ref = useRef<htmldivelement>(null); // 創(chuàng)建ref
    const historyState = useMemo(() => ({ /* 初始狀態(tài) */ }), []); // 示例
    const context = { historyState, ref };

    return (
        <editorcontext.provider value="{context}">
            <div ref="{ref}"> {/* 將ref綁定到DOM元素 */}
                {children}
            </div>
        </editorcontext.provider>
    );
}</htmldivelement></editorcontextprops></htmldivelement>

上述代碼展示了如何通過(guò)EditorProvider將一個(gè)HTMLDivElement的ref共享出去。消費(fèi)組件（例如一個(gè)Lexical插件）可以通過(guò)useEditorContext鉤子獲取到這個(gè)ref。

blur事件的局限性與focusout的優(yōu)勢(shì)

當(dāng)消費(fèi)組件嘗試監(jiān)聽這個(gè)共享ref上的失焦事件時(shí)，一個(gè)常見的誤區(qū)是使用blur事件。

import React, { useEffect, useCallback } from 'react';
import { useEditorContext } from './EditorProvider'; // 假設(shè)路徑

function MyLexicalPlugin() {
    const { ref } = useEditorContext();

    const blurHandler = useCallback((event: FocusEvent) => {
        console.log('Blurred');
        // 在這里處理失焦邏輯
    }, []);

    useEffect(() => {
        const element = ref.current;
        if (element) {
            // 錯(cuò)誤示范：blur事件不冒泡
            element.addEventListener('blur', blurHandler, false);
        }

        return () => {
            if (element) {
                element.removeEventListener('blur', blurHandler);
            }
        };
    }, [ref.current, blurHandler]); // 依賴項(xiàng)中包含ref.current

    return null; // 插件通常不渲染DOM
}

上述代碼中，blurHandler可能不會(huì)按預(yù)期觸發(fā)，尤其是當(dāng)焦點(diǎn)從ref所指向的div內(nèi)部的某個(gè)子元素移出時(shí)。這是因?yàn)?strong>blur事件不會(huì)冒泡。這意味著，如果焦點(diǎn)從一個(gè)子元素移出，blur事件只會(huì)在該子元素上觸發(fā)，而不會(huì)傳播到其父元素（即我們通過(guò)ref引用的div）。

為了解決這個(gè)問(wèn)題，我們應(yīng)該使用focusout事件。focusout事件與blur事件類似，都表示元素失去焦點(diǎn)，但關(guān)鍵區(qū)別在于focusout事件會(huì)冒泡。當(dāng)元素本身或其任何后代元素失去焦點(diǎn)時(shí)，focusout事件都會(huì)在元素上觸發(fā)。這使得它非常適合在父元素上監(jiān)聽子元素的失焦行為。

使用focusout事件實(shí)現(xiàn)正確的失焦監(jiān)聽

將useEffect中的blur事件替換為focusout即可解決問(wèn)題：

import React, { useEffect, useCallback } from 'react';
import { useEditorContext } from './EditorProvider'; // 假設(shè)路徑

function MyLexicalPlugin() {
    const { ref } = useEditorContext();

    const blurHandler = useCallback((event: FocusEvent) => {
        console.log('Blurred or focus moved out from a child element');
        // 在這里處理失焦邏輯
    }, []);

    useEffect(() => {
        const element = ref.current;
        if (element) {
            // 正確做法：使用focusout事件，它會(huì)冒泡
            element.addEventListener('focusout', blurHandler);
        } else {
            return; // 如果element不存在，則不進(jìn)行操作
        }

        // 清理函數(shù)：在組件卸載或依賴項(xiàng)改變時(shí)移除事件監(jiān)聽器
        return () => {
            if (element) { // 再次檢查element是否存在，以防萬(wàn)一
                element.removeEventListener('focusout', blurHandler);
            }
        };
    }, [ref.current, blurHandler]); // 依賴項(xiàng)中包含ref.current和blurHandler

    return null;
}

代碼解析與注意事項(xiàng)：

1. useCallback包裹事件處理函數(shù)： blurHandler被useCallback包裹，這確保了在ref.current不變的情況下，blurHandler的引用在每次渲染時(shí)保持穩(wěn)定。這對(duì)于useEffect的依賴項(xiàng)優(yōu)化非常重要，避免不必要的事件監(jiān)聽器重新注冊(cè)。
2. useEffect的依賴項(xiàng)：
   • ref.current：當(dāng)ref指向的DOM元素發(fā)生變化時(shí)（盡管這種情況在EditorProvider中通常不會(huì)發(fā)生，但作為最佳實(shí)踐，應(yīng)包含），useEffect會(huì)重新運(yùn)行。
   • blurHandler：雖然我們使用了useCallback，但如果blurHandler內(nèi)部依賴了外部變量，并且這些變量發(fā)生變化，blurHandler的引用也會(huì)改變，此時(shí)useEffect需要重新運(yùn)行以注冊(cè)新的事件處理函數(shù)。
3. 清理函數(shù)： useEffect返回的函數(shù)是清理函數(shù)。它會(huì)在組件卸載時(shí)或useEffect的依賴項(xiàng)發(fā)生變化并重新執(zhí)行之前運(yùn)行。在這里，我們移除了之前添加的focusout事件監(jiān)聽器，防止內(nèi)存泄漏。
4. focusout vs focusin： 類似的，focusin事件是focus事件的冒泡版本。如果你需要在父元素上監(jiān)聽子元素的獲取焦點(diǎn)行為，可以使用focusin。
5. 條件檢查： 在useEffect內(nèi)部，始終檢查ref.current是否為null。在組件掛載的初始階段，ref.current可能尚未被賦值。

總結(jié)

在React中，通過(guò)Context共享ref是管理復(fù)雜組件間DOM交互的強(qiáng)大模式。當(dāng)需要監(jiān)聽這些共享ref上的焦點(diǎn)事件時(shí)，理解blur和focusout（或focus和focusin）之間的區(qū)別至關(guān)重要。focusout事件的冒泡特性使其成為在父元素上捕獲子元素失焦行為的理想選擇。結(jié)合useEffect和useCallback的正確使用，我們可以構(gòu)建健壯且無(wú)內(nèi)存泄漏的事件監(jiān)聽機(jī)制。

以上是在React中通過(guò)Context管理Ref并處理焦點(diǎn)事件的實(shí)踐指南的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！