在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;
}
// 创建Context
const EditorContext = createContext(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(null);
const historyState = useMemo(() => ({ /* 初始历史状态 */ }), []); // 示例历史状态
const context = { historyState, ref };
return (
{/* 将ref绑定到DOM元素 */}
{children}
);
} 在上述代码中，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上实现可靠的失焦事件监听。这对于构建复杂的交互式组件，特别是那些需要精细焦点管理功能的组件（如自定义编辑器、模态框等），是必不可少的技术。
