Javascript 如果ref.current的子元素发生更改，如何更新react ref？

我使用React REF处理元素外部的单击

import { useEffect } from 'react';

export const useClickOutside = (ref, callback = () => {}) => {
  const handleClick = e => {
    if (ref.current && !ref.current.contains(e.target)) {
      callback();
    }
  };

  useEffect(() => {
    document.addEventListener('click', handleClick);
    return () => {
      document.removeEventListener('click', handleClick);
    };
  }, []);
};

问题是，有时

ref.current.contains（e.target）

返回false，而e.target是ref.current的实际子元素

我认为这是因为ref.current和ref.current的子元素没有正确更新

---

我对这个问题做了一个小gif：

可能有点晚了，也不是理想的解决方案，但我遇到了同样的问题，只是通过检查单击是否在react select（反应选择）中解决了它。检查event.target.id是否包含“反应选择”：

---

这可能有点晚，也不是理想的解决方案，但我也遇到了同样的问题，只是通过检查单击是否在react select（反应选择）中解决了它。检查event.target.id是否包含“反应选择”：

---

我宁愿猜测，问题是

ref.current

返回DOM元素或相应的组件，因此应用

contains（）

方法来查询子节点（如果这是您的意图）是没有意义的。此外，在

useClickOut（）

之外调用

handleClick（）

会导致错误。在

useClickOutside（）

中定义

useffect（）

而不是主组件定义主体，对我来说也是不合适的。您能否更详细地描述一下您的用例，以便为您的问题提供替代解决方案？您可以在

handleClick

函数中调试它。只需

console.log

ref.current和e.target来检查这些变量的值是否正确。我添加了一个gif，这样您就可以理解我的猜测，问题是

ref.current

返回DOM元素或相应的组件，从而应用

contains（）

方法来查询子节点（如果这是您的意图）是没有意义的。此外，在

useClickOutside（）

之外调用

handleClick（）

会导致错误。在

useClickOutside（）内定义
useffect（）
）

而不是主组件定义体在我看来也不合适。您能更详细地描述一下您的用例，以便建议您的问题的替代解决方案吗？您可以在

handleClick

函数中调试它。只需

console.log

ref.current和e.target来检查这些变量更正值。我添加了一个gif以便您能够理解

const handleClick = (e) => {
    if (ref.current && !ref.current.contains(e.target)) {
        if (!e?.target?.id.includes('react-select')) {
            callback()
        }
    }
}