Как очистить слушателей событий в реакции после удаления элемента из DOM

Question

Идея состояла в том, чтобы создать выпадающий список, который прослушивает щелчки мыши вне его элементов, а затем уничтожается. Я могу получить желаемый эффект, но не могу очистить события каждый раз, когда раскрывающиеся элементы уничтожаются (после нескольких открытий и закрывающихся выпадающих списков я регистрируюсь как десять щелчков, даже если раскрывающийся список закрыт), пытаясь ознакомиться с ними. реагируйте, чтобы оценить вашу помощь *

рендер

  render() {
    const { setTheState } = this.state;
    console.log(this.myRef)

    return (this.state.isOpen === true ?
      <div id="drop_down_node" ref={this.setmyRefRef}>
        <div class="confirm_modal_content">
          <div className="dropdown-content">
            <a>Room settings</a>
            <a onClick={setTheState}>standard room</a>
            <a

            // onClick={() => handleReject(row)}
            >
              deluxe room
            </a>
          </div>
        </div>
      </div> : null
    );
  }
}

export default RequestDropDown;

Answer 1

componentWillMount() {
    document.addEventListener('mousedown', this.handleClick, false);

}

componentWillUnMount() {
    document.removeEventListener('mousedown', this.handleClick, false);
}