JavaScript Node.contains()不检测深层子元素致React DatePicker点击日期异常关闭

问题根因分析 #

你遇到的情况并不是Node.contains()不支持深层节点检测，这是React状态更新触发DOM重绘导致的常见场景：

• 点击日期元素后，首先会触发日期选择的回调逻辑，更新DatePicker内部选中值的状态，这个状态更新会触发日历区域的DOM重渲染，你点击的.day节点会被直接卸载替换
• 等点击事件冒泡到document触发你绑定的监听函数时，原来的e.target已经是游离在DOM树外的节点，ref.current.contains(e.target)自然会返回false，触发关闭逻辑

修复方案 #

推荐使用Event.composedPath()获取事件完整冒泡路径来判断，该方法会返回事件触发时完整的节点链，不受后续DOM重绘的影响，修改后的Hook代码如下：

export default (ref, triggerRef, visible, setVisible) => {
    React.useEffect(() => {
        let handleClick;

        if (visible) {
            handleClick = (e) => {
                // 先获取事件冒泡的完整路径
                const path = e.composedPath?.() || [];
                // 判断点击的元素既不在容器内，也不是触发弹出的触发器元素
                const isClickOutside = !path.some(node => 
                  node === ref.current || (triggerRef?.current && node === triggerRef.current)
                );
                if (ref.current && isClickOutside) {
                    // 直接设为false即可，不需要取反避免状态异常
                    setVisible(false);
                }
            };

            document.addEventListener('click', handleClick);
        }

        return () => {
            document.removeEventListener('click', handleClick);
        };
    // 补充ref和triggerRef到依赖数组
    }, [visible, ref, triggerRef, setVisible]);
};

如果你的触发器元素（就是那个控制显示隐藏的<p>标签）不需要排除点击，可以去掉triggerRef相关的逻辑。

额外优化建议 #

• 如果你的日历组件使用了React Portal渲染到容器外，只需要把Portal挂载的根节点也加入判断逻辑即可
• 可以额外监听escape按键触发关闭，提升交互体验

内容的提问来源于stack exchange，提问作者r.kashigin