Javascript 检测组件外部的单击

我试图使用react钩子来确定用户是否在元素外部单击。我正在使用

useRef

获取对元素的引用

有人知道怎么解决这个问题吗。我得到以下错误和以下

类型“REOBJECT”上不存在属性“contains”

上面的错误似乎是typescript问题

存在具有不同错误的错误

在这两种情况下，它都不起作用

import React，{useState，useffect，useRef}来自'React'；
从“react dom”导入react dom；
常量菜单=（）=>{
const wrapperRef=useRef（null）；
const[isVisible，setIsVisible]=useState（true）；
//以下内容与componentDidMount和componentDidUnmount相同
useffect（（）=>{
document.addEventListener（'click'，handleclickout，true）；
return（）=>{
document.removeEventListener（'click'，handleClickOutside，true）；
};
}, []);
const handleClickOutside=事件=>{
const domNode=ReactDOM.findDOMNode（wrapperRef）；
//错误来自下面
如果（！domNode | |！domNode.contains（event.target））{
setIsVisible（假）；
}
}
返回(
菜单

)
}

应该这样使用：

import React, { useState, useRef, useEffect } from "react";
import ReactDOM from "react-dom";

function App() {
  const wrapperRef = useRef(null);
  const [isVisible, setIsVisible] = useState(true);

  // below is the same as componentDidMount and componentDidUnmount
  useEffect(() => {
    document.addEventListener("click", handleClickOutside, false);
    return () => {
      document.removeEventListener("click", handleClickOutside, false);
    };
  }, []);

  const handleClickOutside = event => {
    if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
      setIsVisible(false);
    }
  };

  return (
    isVisible && (
      <div className="menu" ref={wrapperRef}>
        <p>Menu</p>
      </div>
    )
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

import React，{useState，useRef，useffect}来自“React”；
从“react dom”导入react dom；
函数App（）{
const wrapperRef=useRef（null）；
const[isVisible，setIsVisible]=useState（true）；
//以下内容与componentDidMount和componentDidUnmount相同
useffect（（）=>{
document.addEventListener（“单击”，handleClickOutside，false）；
return（）=>{
document.removeEventListener（“单击”，handleClickOutside，false）；
};
}, []);
const handleClickOutside=事件=>{
if（wrapperRef.current&！wrapperRef.current.contains（event.target））{
setIsVisible（假）；
}
};
返回(
isVisible&(
菜单

)
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

从调用的中检出此库

import*作为来自“React”的React
从“use onclickoutside”导入useOnClickOutside
导出默认函数模式（{close}）{
const ref=React.useRef（null）
useOnClickOutside（参考，关闭）
返回{'Modal content'}
}

另一种解决方案是使用全屏不可见框

import React，{useState}来自“React”；
常量菜单=（）=>{
const[active，setActive]=useState（false）；
返回(
{/*菜单的z-index=1，因此它始终位于顶部*/}
setActive（真）}
{活动的
？菜单处于活动状态

：菜单处于非活动状态

}
{/*这是一个全屏框，z-index=0*/}
{活动的
？设置活动（错误）}>
：null
}
);
}

和CSS：

菜单{
z指数：1；
}
.无形的{
高度：100vh；
左：0；
位置：固定；
排名：0；
宽度：100vw；
z指数：0；
}

您可能应该阅读、和、和…然后重新考虑您的问题。请查看我的堆栈答案，包括react挂钩和外部单击检测的工作示例：。这对你有帮助吗？