React中通过父组件焦点管理子组件可见性的问题求解

你遇到的问题根因是：当选项框内元素被销毁时，浏览器触发的blur事件的relatedTarget会返回null，原有逻辑无法区分「焦点正常跳到容器外部」和「焦点因内部元素销毁跳转到body」两种场景，因此出现误判。

以下是两种符合你要求的可行方案：

该方案改动最小，无需调整现有组件内部结构，也不需要手动控制焦点：

• 保留原有onFocus逻辑触发选项框显示
• 调整onBlur逻辑：仅当relatedTarget真实存在且不在容器内部时，才直接隐藏选项框；如果relatedTarget为null，不执行隐藏操作
• 全局监听pointerdown事件（比click触发更早，交互体验更流畅），每次事件触发时判断点击目标是否在容器外部，如果是且选项框处于显示状态，则隐藏选项框
• 增加事件监听清理逻辑，避免内存泄漏

修改后的代码如下：

import { useState, useRef, useEffect } from 'react';
import OptionsBox from './OptionsBox';

export default function Search() {
    const [value, setValue] = useState('');
    const [showOptions, setShowOptions] = useState(false);
    const containerRef = useRef(null);

    // 监听全局点击，判断是否点击容器外部
    useEffect(() => {
        const handleOutsideClick = (e) => {
            if (containerRef.current && !containerRef.current.contains(e.target) && showOptions) {
                setShowOptions(false);
            }
        };
        document.addEventListener('pointerdown', handleOutsideClick);
        return () => document.removeEventListener('pointerdown', handleOutsideClick);
    }, [showOptions]);

    return (
        <div
            ref={containerRef}
            tabIndex={-1}
            onFocus={() => setShowOptions(true)}
            onBlur={event => {
                const relatedTarget = event.relatedTarget;
                // 仅当relatedTarget真实存在且不在容器内时直接隐藏
                if (relatedTarget && !event.currentTarget.contains(relatedTarget)) {
                    setShowOptions(false);
                }
            }}
        >
            <input
                type="text"
                value={value}
                onChange={event => setValue(event.target.value)}
            />
            {showOptions && (
                <OptionsBox />
            )}
        </div>
    );
}

该方案完全不影响autofocus属性的正常生效，也不需要给选项框内元素加额外逻辑。

如果你的场景不需要强依赖原生键盘Tab切换焦点的能力，可以完全自主维护组件活跃状态，彻底脱离原生焦点限制：

• 维护独立的活跃状态代替原生焦点判断
• 输入框聚焦、容器内部任意点击/输入操作触发时，将活跃状态设为真
• 外部点击、ESC按键按下时，将活跃状态设为假
• 直接用该状态控制选项框的显示隐藏

该方案完全不受内部元素销毁导致的焦点跳转影响，逻辑稳定性更高，适合交互复杂度高的下拉场景。

内容的提问来源于stack exchange，提问作者Robo Robok