检测React组件外部的单击

Question

检测React组件外部的单击我正在寻找一种方法来检测是否在组件外发生了单击事件，如本文所述。jQuery nearest（）用于查看click事件中的目标是否具有dom元素作为其父元素之一。如果匹配，则click事件属于其中一个子项，因此不被视为在组件之外。所以在我的组件中，我想将一个单击处理程序附加到窗口。当处理程序触发时，我需要将目标与我的组件的dom子项进行比较。click事件包含“path”之类的属性，它似乎保存了事件所经过的dom路径。我不确定要比较什么或如何最好地遍历它，我认为有人必须已经把它放在一个聪明的实用功能中......不是吗？

Answer 1

以下解决方案使用ES6并遵循绑定的最佳实践以及通过方法设置ref。

要看到它的实际效果：

• 课程实施

• 钩子实施

课程实施：

import React, { Component } from 'react';/**
 * Component that alerts if you click outside of it
 */export default class OutsideAlerter extends Component {
  constructor(props) {
    super(props);

    this.setWrapperRef = this.setWrapperRef.bind(this);
    this.handleClickOutside = this.handleClickOutside.bind(this);
  }

  componentDidMount() {
    document.addEventListener('mousedown', this.handleClickOutside);
  }

  componentWillUnmount() {
    document.removeEventListener('mousedown', this.handleClickOutside);
  }

  /**
   * Set the wrapper ref
   */
  setWrapperRef(node) {
    this.wrapperRef = node;
  }

  /**
   * Alert if clicked on outside of element
   */
  handleClickOutside(event) {
    if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
      alert('You clicked outside of me!');
    }
  }

  render() {
    return <div ref={this.setWrapperRef}>{this.props.children}</div>;
  }}OutsideAlerter.propTypes = {
  children: PropTypes.element.isRequired,};

钩子实施：

import React, { useRef, useEffect } from "react";/**
 * Hook that alerts clicks outside of the passed ref
 */function useOutsideAlerter(ref) {
  /**
   * Alert if clicked on outside of element
   */
  function handleClickOutside(event) {
    if (ref.current && !ref.current.contains(event.target)) {
      alert("You clicked outside of me!");
    }
  }

  useEffect(() => {
    // Bind the event listener
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      // Unbind the event listener on clean up
      document.removeEventListener("mousedown", handleClickOutside);
    };
  });}/**
 * Component that alerts if you click outside of it
 */export default function OutsideAlerter(props) {
  const wrapperRef = useRef(null);
  useOutsideAlerter(wrapperRef);

  return <div ref={wrapperRef}>{props.children}</div>;}

Answer 2

UseOnClickOutside Hook - React 16.8 +

创建一个通用useOnOutsideClick函数

export const useOnOutsideClick = handleOutsideClick => {
  const innerBorderRef = useRef();

  const onClick = event => {
    if (
      innerBorderRef.current &&
      !innerBorderRef.current.contains(event.target)
    ) {
      handleOutsideClick();
    }
  };

  useMountEffect(() => {
    document.addEventListener("click", onClick, true);
    return () => {
      document.removeEventListener("click", onClick, true);
    };
  });

  return { innerBorderRef };};const useMountEffect = fun => useEffect(fun, []);

然后在任何功能组件中使用钩子。

const OutsideClickDemo = ({ currentMode, changeContactAppMode }) => {

  const [open, setOpen] = useState(false);
  const { innerBorderRef } = useOnOutsideClick(() => setOpen(false));

  return (
    <div>
      <button onClick={() => setOpen(true)}>open</button>
      {open && (
        <div ref={innerBorderRef}>
           <SomeChild/>
        </div>
      )}
    </div>
  );};

链接到演示