Reactjs 使用React钩子的外部单击事件

我正在尝试为DOM元素开发一个click事件处理程序函数，这样当我单击div的外部时，相应的DOM元素就会关闭。我一直在尝试以下代码，但得到的错误是

TypeError:node.contains不是函数

。不确定我是否正确地使用react钩子。任何形式的帮助都将不胜感激

import React, { useState, useEffect, useRef } from 'react';

    const OutSiderClickComponent = () => {
    const [visible, setVisible] = useState(false);
    const node = useRef();

    const handleClick = () => {
      if (!visible) {
        document.addEventListener('click', handleOutsideClick, false);
       } else {
        document.removeEventListener('click', handleOutsideClick, false);
     }
     setVisible(prevState => ({
     visible: !prevState.visible,
     }));
   }

   const handleOutsideClick = (e) => {
      if (node.contains(e.target)) {
          return;
    }
    handleClick();
    }
    return(
        <div ref={node}>
            <button onClick={handleClick}>Click to See</button>
                {visible && <div>You Clicked the Button</div>}
        </div>
       );
     };


 export default OutSiderClickComponent; 

import React，{useState，useffect，useRef}来自'React'；
常量组件=（）=>{
const[visible，setVisible]=useState（false）；
const node=useRef（）；
常量handleClick=（）=>{
如果（！可见）{
document.addEventListener（'click'，handleOutsideClick，false）；
}否则{
document.removeEventListener（'click'，handleOutsideClick，false）；
}
setVisible（prevState=>({
可见：！prevState.visible，
}));
}
const handleOutsideClick=（e）=>{
if（节点包含（如目标））{
返回；
}
handleClick（）；
}
返回(
点击查看
{可见&&您单击了按钮}
);
};
导出默认组件；

使用

useRef

时，需要记住该值位于

ref

的

current

属性中

尝试

node.current.contains（）

其余部分应该更像这样，使用

React.useffect

：

const handleOutsideClick = (e) => {
    if (node.current.contains(e.target)) {
        console.log('clicked inside');
        // this.setVisible(true);
    } else {
        this.setVisible(false);
    }
}   

React.useEffect(() => {
    document.addEventListener('click', handleOutsideClick, false);
    return () => void document.removeEventListener('click', handleOutsideClick, false);
}, []);

及

void setVisible（true）}>单击查看

使用

useRef

时，需要记住该值位于

ref

的

current

属性中

尝试

node.current.contains（）

其余部分应该更像这样，使用

React.useffect

：

const handleOutsideClick = (e) => {
    if (node.current.contains(e.target)) {
        console.log('clicked inside');
        // this.setVisible(true);
    } else {
        this.setVisible(false);
    }
}   

React.useEffect(() => {
    document.addEventListener('click', handleOutsideClick, false);
    return () => void document.removeEventListener('click', handleOutsideClick, false);
}, []);

及

void setVisible（true）}>单击查看

有两个变化。首先，您需要使用

node.current

检查ref，

node.current.contains（e.target）

。此外，ref必须附加到需要检测外部单击的节点

var{useState，useffect，useRef}=React；
常量组件=（）=>{
const[visible，setVisible]=useState（false）；
const node=useRef（）；
常量handleClick=（）=>{
如果（！可见）{
document.addEventListener（'click'，handleOutsideClick，false）；
}否则{
document.removeEventListener（'click'，handleOutsideClick，false）；
}
setVisible（prevState=>({
可见：！prevState.visible，
}));
}
const handleOutsideClick=（e）=>{
if（node.current.contains（e.target））{
返回；
}
setVisible（上一个=>！上一个可见）
}
返回(
点击查看
{可见&&您单击了按钮}
);
};
ReactDOM.render（，document.getElementById（'app'））
有两个变化。首先，您需要使用
node.current
检查ref，
node.current.contains（e.target）
。此外，ref必须附加到需要检测外部单击的节点


var{useState，useffect，useRef}=React；
常量组件=（）=>{
const[visible，setVisible]=useState（false）；
const node=useRef（）；
常量handleClick=（）=>{
如果（！可见）{
document.addEventListener（'click'，handleOutsideClick，false）；
}否则{
document.removeEventListener（'click'，handleOutsideClick，false）；
}
setVisible（prevState=>({
可见：！prevState.visible，
}));
}
const handleOutsideClick=（e）=>{
if（node.current.contains（e.target））{
返回；
}
setVisible（上一个=>！上一个可见）
}
返回(
点击查看
{可见&&您单击了按钮}
);
};
ReactDOM.render（，document.getElementById（'app'））

我也尝试过，但当我单击“外部无任何事件”时，我也尝试过，但当我单击“外部无任何事件”时，已通过其他方式解决了此问题，但感谢您的回答。它帮助我找到了错误…@saon你的解决方案是什么？现在不记得确切的解决方案了，但我想，我使用了“mousedown”eventhandler而不是“click”，并将ref附加到两个div（父和子）上，它确实起到了正确的作用。已经用其他方式解决了问题，但谢谢你的回答。它帮助我找到了错误…@saon您的解决方案是什么？现在不记得确切的解决方案，但我想，我使用了“mousedown”事件处理程序而不是“click”，并将ref附加到两个div（父和子）上，它确实正常工作