小编典典

如何侦听组件外部的单击事件

reactjs

当在下拉组件外部单击时,我想关闭下拉菜单。

我怎么做?


阅读 232

收藏
2020-07-22

共1个答案

小编典典

在我添加的元素中mousedownmouseup像这样:

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

然后在父母中,我这样做:

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隐藏它。

2020-07-22