检测点击外部组件反应挂钩

Question

我正在尝试使用反应挂钩来确定用户是否在元素外部单击。我正在使用 useRef 来获取对该元素的引用。

任何人都可以看到如何解决这个问题。我收到以下错误并 从此处获得以下答案。

“RefObject”类型上不存在属性“包含”

上面的错误似乎是打字稿问题。

这里有一个带有不同错误的代码沙箱。

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

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

const Menu = () => {
    const wrapperRef = useRef<HTMLDivElement>(null);
    const [isVisible, setIsVisible] = useState(true);

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

    const handleClickOutside = event => {
       const domNode = ReactDOM.findDOMNode(wrapperRef);
       // error is coming from below
       if (!domNode || !domNode.contains(event.target)) {
          setIsVisible(false);
       }
    }

    return(
       <div ref={wrapperRef}>
         <p>Menu</p>
       </div>
    )
}

原文由 peter flanagan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

useRef API 应该像这样使用：

 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);

原文由 thedude 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我已经创建了这个通用挂钩，它可以用于所有需要此功能的 div。

 import { useEffect } from 'react';

/**
 *
 * @param {*} ref - Ref of your parent div
 * @param {*} callback - Callback which can be used to change your maintained state in your component
 * @author Pranav Shinde 30-Nov-2021
 */
const useOutsideClick = (ref, callback) => {
    useEffect(() => {
        const handleClickOutside = (evt) => {
            if (ref.current && !ref.current.contains(evt.target)) {
                callback(); //Do what you want to handle in the callback
            }
        };
        document.addEventListener('mousedown', handleClickOutside);
        return () => {
            document.removeEventListener('mousedown', handleClickOutside);
        };
    });
};

export default useOutsideClick;

用法 -

1. 在您的组件中导入钩子
2. 将 ref 添加到包装器 div 并将其传递给挂钩
3. 添加一个回调函数来改变你的状态（隐藏下拉/模式）

 import React, { useRef } from 'react';
import useOutsideClick from '../../../../hooks/useOutsideClick';

const ImpactDropDown = ({ setimpactDropDown }) => {
    const impactRef = useRef();

    useOutsideClick(impactRef, () => setimpactDropDown(false)); //Change my dropdown state to close when clicked outside

    return (
        <div ref={impactRef} className="wrapper">
            {/* Your Dropdown or Modal */}
        </div>
    );
};

export default ImpactDropDown;

原文由 pranav shinde 发布，翻译遵循 CC BY-SA 4.0 许可协议