将事件侦听器添加到 React 上下文中的 ref
P粉765570115
P粉765570115 2024-01-29 00:12:47
[React讨论组]

React 上下文提供程序设置一个 ref ,另一个组件使用它来设置模糊事件侦听器。问题是模糊事件不会触发侦听器。

上下文提供程序的代码摘录。

...
export function useEditorContext(): EditorContextProps {
    return useContext(EditorContext) as EditorContextProps;
}

export default function EditorProvider({ children }: { children: React.ReactNode }) {
    const ref = useRef<HTMLDivElement>(null);
    const historyState = useMemo(createEmptyHistoryState, []);
    const context = { historyState, ref };
    return (
        <EditorContext.Provider value={context}>
            <div ref={ref}>
                {children}
            </div>
        </EditorContext.Provider>
    );
}

目标是将侦听器附加到 Lexical 插件中。

const { historyState, ref } = useEditorContext();

const blurHandler = (event: FocusEvent) => {
    console.log('Blurred');
};

useEffect(() => {
    const element = ref.current;
    if (element) {
        element.addEventListener('blur', blurHandler, false);
    } else return;

    return () => {
        element.removeEventListener('blur', blurHandler);
    };
}, [ref.current]); // eslint-disable-line

我已经使用日志记录运行了代码,并尝试了 useRefaddEventListener 的几种解决方案/答案,但在上述场景中没有一个起作用。欢迎任何建议!

P粉765570115
P粉765570115

全部回复(1)
P粉668146636

blur 事件不会冒泡,但您可以使用相关的 focusout 事件来处理失去焦点的子元素。

if (element) {
  element.addEventListener('focusout', blurHandler);
} else return;

return () => element.removeEventListener('focusout', blurHandler);
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号