如何监听组件外部的点击事件 [英] How to listen for click events that are outside of a component

问题描述

我想在下拉组件之外发生点击时关闭下拉菜单.

I want to close a dropdown menu when a click occurs outside of the dropdown component.

我该怎么做?

推荐答案

在元素中，我像这样添加了 mousedown 和 mouseup:

In the element I have added mousedown and mouseup like this:

onMouseDown={this.props.onMouseDown} onMouseUp={this.props.onMouseUp}

然后在父级中我这样做:

Then in the parent I do this:

componentDidMount: function () {
    window.addEventListener('mousedown', this.pageClick, false);
},

pageClick: function (e) {
  if (this.mouseIsDownOnCalendar) {
      return;
  }

  this.setState({
      showCal: false
  });
},

mouseDownHandler: function () {
    this.mouseIsDownOnCalendar = true;
},

mouseUpHandler: function () {
    this.mouseIsDownOnCalendar = false;
}

showCal 是一个布尔值，当 true 在我的情况下显示日历并且 false 隐藏它.

The showCal is a boolean that when true shows in my case a calendar and false hides it.

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