检测点击外部组件反应钩 [英] Detect click outside component react hooks

问题描述

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

I am trying to use react hooks to determine if a user has clicked outside an element. I am using useRef to get a reference to the element.

任何人都可以看到如何解决此问题.我收到以下错误，并从这里答案.

Can anyone see how to fix this. I am getting the following errors and following answers from here.

类型"RefObject"上不存在属性包含"

Property 'contains' does not exist on type 'RefObject'

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

This error above seems to be a typescript issue.

这里有一个代码沙箱，具有不同的错误.

There is a code sandbox here with a different error.

在两种情况下都无法正常工作.

In both cases it isn't working.

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

推荐答案

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

这篇关于检测点击外部组件反应钩的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！