如何检测 React 组件外部的点击？

如何检测 React 组件外部的点击

要检测 React 组件外部的点击，可以使用以下方法：

事件处理

将点击事件监听器附加到窗口对象。当单击事件发生时，将事件的目标元素与组件的 DOM 子元素进行比较。如果目标不是组件的后代，则单击被认为是在组件外部。

使用 DOM 遍历

要将目标元素与组件的子元素进行比较，可以使用DOM 提供的closest() 或 contains() 方法。

Closest()方法：

closest() 方法检查一个元素是否是另一个元素的后代。它返回与指定选择器匹配的最近的祖先元素。

const target = event.target;
const componentDOM = document.querySelector('.my-component');
if (!componentDOM.closest('.my-component')) {
  // Click occurred outside the component
}

Contains() 方法：

contains() 方法检查一个元素是否包含另一个元素。它返回一个布尔值，指示该元素是否是另一个元素的后代。

const target = event.target;
const componentDOM = document.querySelector('.my-component');
if (!componentDOM.contains(target)) {
  // Click occurred outside the component
}

引用管理

要访问组件的 DOM 元素，可以使用 React refs。为组件的元素分配一个引用，然后使用该引用查询 DOM。

函数组件示例：

function OutsideAlerter(props) {
  const wrapperRef = useRef(null);

  useOutsideAlerter(wrapperRef);

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

function useOutsideAlerter(ref) {
  useEffect(() => {
    function handleClickOutside(event) {
      if (ref.current && !ref.current.contains(event.target)) {
        alert('You clicked outside of me!');
      }
    }

    document.addEventListener('mousedown', handleClickOutside);

    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [ref]);
}

类组件示例：

class OutsideAlerter extends Component {
  constructor(props) {
    super(props);

    this.wrapperRef = React.createRef();
  }

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

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

  handleClickOutside = (event) => {
    if (this.wrapperRef.current && !this.wrapperRef.current.contains(event.target)) {
      alert('You clicked outside of me!');
    }
  }

  render() {
    return <div ref={this.wrapperRef}>{this.props.children}</div>;
  }
}

通过使用这些技术，您可以准确地检测React 组件之外的点击，提供更好的用户体验和性能优化。

以上是如何检测 React 组件外部的点击？的详细内容。更多信息请关注PHP中文网其他相关文章！