局外人使用React Hook点击事件

Question

我正在尝试为DOM元素开发一个点击事件处理程序功能，以便当我单击DIV的外部时，相应的DOM元素关闭。我一直在尝试以下代码，但是我收到了TypeError: node.contains is not a function的错误。不确定我是否使用React Hook正确地进行操作。任何类型的帮助都将不胜感激。

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; 

Answer 1

使用useRef时，您需要记住该值是在ref的current属性中。

尝试node.current.contains()。

使用React.useEffect：

，其余的看起来更像是这样。

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);
}, []);

和

<button onClick={() => void setVisible(true)}>Click to See</button>

Answer 2

有两个更改。首先，您需要使用node.current检查参考， node.current.contains(e.target)。另外，裁判必须附加到您需要检测到外部的节点

var { useState, useEffect, useRef } =  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.current.contains(e.target)) {
          return;
      }
      setVisible(prev => !prev.visible)
    }
    return(
        <div>
            <button onClick={handleClick}>Click to See</button>
                {visible && <div ref={node}>You Clicked the Button</div>}
        </div>
       );
     };
     
     
ReactDOM.render(<OutSiderClickComponent />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="app" />