Javascript 如何在从DOM中删除元素后清除react中的事件侦听器

其想法是创建一个下拉列表，在其元素外部侦听鼠标单击，然后将其销毁。 我可以达到我想要的效果，但是每次删除元素时我都无法清除事件 （在打开和关闭下拉列表两次之后，即使下拉列表关闭，我也会进行十次点击） 努力熟悉react，以感谢您的帮助

我的努力， 调用组件

RequestDropDown.create(row.id).show({
      room_id: row.id,
      setTheState: this.setTheState
    });

单击创建元素

class RequestDropDown extends Component {
  static create(props = {}) {
    const containerElement = document.createElement('div');
    containerElement.classList.add('RequestDropDown_container');
    document.getElementById(`table_dots_btn_${props}`).after(containerElement);
    return render(
      <RequestDropDown createDropDownProps={props} />,
      containerElement
    );
  }

渲染

  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;

render（）{
const{setTheState}=this.state；
console.log（this.myRef）
返回（this.state.isOpen==true？
房间设置
标准间
handleReject（世界其他地区）}
>
豪华间
：null
);
}
}
导出默认请求下拉列表；

componentWillMount（）{
document.addEventListener（'mousedown'，this.handleClick，false）；
}
组件将卸载（）{
document.removeEventListener（'mousedown'，this.handleClick，false）；
}

componentWillMount（）{
document.addEventListener（'mousedown'，this.handleClick，false）；
}
组件将卸载（）{
document.removeEventListener（'mousedown'，this.handleClick，false）；
}

componentWillMount（）已被弃用，请在使用React时使用componentDidMount（），不要使用getElementsByClassName和removeChildTried更改DOM，没有成功@HermitCrab，请接受我尝试过的建议，另外，我唯一的选择是在需要的地方附加组件。我还注意到，您将eventListener附加到文档，然后将其从窗口中删除。你必须从同一个元素（即文档）中删除它。我也尝试过了bro@HermitCrab，那只是我疯了。ComponentWillMount（）不推荐使用，请在使用React时使用componentDidMount（），不要使用getElementsByClassName和removeChildTried修改它，没有成功@HermitCrab，请允许我接受我尝试过的建议，我唯一的选择是将组件附加到我需要的位置。我还注意到您将eventListener附加到文档，然后将其从窗口中删除。你必须从同一个元素（即文档）中删除它。我也试过了bro@HermitCrab，那只是我疯了

  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;