1. ホーム
  2. reactjs

[解決済み] コンポーネントの外側のクリックイベントをリッスンする方法

2023-02-16 03:32:08

質問

ドロップダウンコンポーネントの外側でクリックが発生した場合、ドロップダウンメニューを閉じたいのです。

どうすればよいですか?

どのように解決するのですか?

要素に 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 はそれを隠します。