React Context中Ref元素事件监听的陷阱与focusout的妙用

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

// 定义Context的类型
interface EditorContextProps {
    historyState: any; // 示例属性
    ref: React.RefObject<HTMLDivElement>;
}

// 创建Context
const EditorContext = createContext<EditorContextProps | undefined>(undefined);

// 自定义Hook，用于便捷访问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组件，提供ref
export default function EditorProvider({ children }: { children: React.ReactNode }) {
    const ref = useRef<HTMLDivElement>(null);
    const historyState = useMemo(() => ({ /* 初始历史状态 */ }), []); // 示例历史状态
    const context = { historyState, ref };

    return (
        <EditorContext.Provider value={context}>
            <div ref={ref}> {/* 将ref绑定到DOM元素 */}
                {children}
            </div>
        </EditorContext.Provider>
    );
}

import React, { useEffect, useCallback } from 'react';
import { useEditorContext } from './EditorProvider'; // 假设EditorProvider在同级或父目录

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

    const blurHandler = useCallback((event: FocusEvent) => {
        console.log('Blurred from original handler');
        // 在这里处理失焦逻辑
    }, []);

    useEffect(() => {
        const element = ref.current;
        if (element) {
            // 尝试监听blur事件
            element.addEventListener('blur', blurHandler, false);
        } else {
            return; // ref.current可能在初次渲染时为null
        }

        // 清理函数，在组件卸载或依赖项变化时移除监听器
        return () => {
            if (element) {
                element.removeEventListener('blur', blurHandler);
            }
        };
    }, [ref.current, blurHandler]); // 依赖ref.current确保在ref更新时重新绑定

    return null; // 这是一个插件组件，不渲染任何UI
}

import React, { useEffect, useCallback } from 'react';
import { useEditorContext } from './EditorProvider';

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

    const blurHandler = useCallback((event: FocusEvent) => {
        console.log('Blurred via focusout handler');
        // 在这里处理失焦逻辑，现在它会按预期触发
    }, []);

    useEffect(() => {
        const element = ref.current;
        if (element) {
            // 使用focusout事件代替blur
            element.addEventListener('focusout', blurHandler);
        } else {
            return;
        }

        return () => {
            if (element) {
                element.removeEventListener('focusout', blurHandler);
            }
        };
    }, [ref.current, blurHandler]);

    return null;
}