本文探讨了在React应用中，通过Context传递的DOM引用（ref）上监听blur事件时可能遇到的问题。核心在于blur事件不冒泡，导致在父元素上无法捕获子元素的失焦行为。解决方案是使用focusout事件，它具备冒泡特性，能有效处理此类场景，确保事件监听器按预期触发。
在react开发中，我们经常需要通过ref直接操作dom元素，尤其是在需要与第三方库集成或处理焦点管理等场景时。当ref通过react context在组件树中传递并被子组件使用时，对其添加事件监听器是一种常见模式。然而，对于某些特定事件，如blur（失焦事件），其行为特性可能会导致意想不到的问题，特别是在父元素上监听子元素的失焦时。
通过React Context传递Ref
首先，我们来看一下如何通过Context提供一个DOM ref。这通常涉及在一个Provider组件中创建ref，并将其作为Context值的一部分传递下去。
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> ); }
在上述代码中，EditorProvider创建了一个ref并将其绑定到一个div元素上。这个ref随后通过EditorContext.Provider的值传递给其子组件。任何消费EditorContext的组件都可以访问到这个ref所指向的DOM元素。
blur事件的局限性
当我们在一个消费Context的组件中尝试监听这个ref所指向的DOM元素的blur事件时，可能会发现事件并没有按预期触发，尤其是在该DOM元素内部有其他可聚焦元素（如输入框、按钮）时。
考虑以下监听代码：
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 }
这段代码的预期是，当ref.current指向的div元素失去焦点时，blurHandler会被调用。然而，如果焦点从这个div内部的一个子元素（例如一个文本输入框）转移到div外部的另一个元素，blurHandler可能不会被触发。
这是因为blur事件的特性：它不冒泡（does not bubble）。这意味着blur事件只会直接在失去焦点的那个元素上触发，而不会沿着DOM树向上冒泡到其父元素。因此，如果你在父div上监听blur，当子元素失去焦点时，父div本身并没有直接失去焦点（只是其内部的焦点转移了），所以blur事件不会在父div上被捕获。
解决方案：使用focusout事件
为了解决blur事件不冒泡的问题，我们可以使用focusout事件。focusout事件与blur事件非常相似，它也在元素失去焦点时触发，但关键的区别在于：focusout事件会冒泡（bubbles）。这意味着，当一个子元素失去焦点时，focusout事件会从该子元素开始，沿着DOM树向上冒泡，直到根元素。这样，我们就可以在父元素上捕获到子元素的失焦行为。
将上述代码中的blur替换为focusout即可：
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; }
通过将addEventListener(‘blur’, …)改为addEventListener(‘focusout’, …), 当ref.current所指向的div内部的任何元素失去焦点（或者div本身失去焦点）时，blurHandler都将正确触发。
blur vs. focusout：关键区别
| 特性 | blur 事件 | focusout 事件 |
|---|---|---|
| 冒泡 | 不冒泡 (Non-bubbling) | 冒泡 (Bubbling) |
| 触发时机 | 当元素本身失去焦点时触发。 | 当元素本身或其任何后代元素失去焦点时触发。 |
| 用途 | 通常用于直接处理单个元素的失焦状态。 | 适用于在父元素上监听子元素的失焦行为，进行事件委托。 |
注意事项与总结
- 事件冒泡理解： 深入理解DOM事件的冒泡和捕获机制对于正确处理事件至关重要。blur和focus是少数不冒泡的事件之一，而focusin和focusout是它们冒泡的对应版本。
- useEffect依赖： 确保useEffect的依赖数组包含ref.current（如果ref本身可能改变）和blurHandler（如果blurHandler不是用useCallback包裹的，或者其内部逻辑依赖于外部变量）。
- 清理函数： 始终在useEffect中提供一个清理函数来移除事件监听器，以防止内存泄漏和不必要的行为。
- ref.current的非空检查： 在访问ref.current之前，务必进行非空检查，因为在组件挂载的早期阶段，ref.current可能为null。
通过使用focusout事件，我们能够克服blur事件不冒泡的限制，在React Context传递的DOM ref上实现可靠的失焦事件监听。这对于构建复杂的交互式组件，特别是那些需要精细焦点管理功能的组件（如自定义编辑器、模态框等），是必不可少的技术。