Не могу получить условную работу для выпадающего меню

Question

Я пытаюсь отобразить раскрывающийся список с React, но у меня проблемы с этим текущим набором кода. Предполагается скрывать меню при нажатии кнопки меню и при нажатии за пределами цели. Что я делаю не так?

    constructor(){
    super()
    this.container = React.createRef();
    this.state = state;
    let state = {
        open: false,
      };
}

handleButtonClick = () => {
    this.setState(state => {
      return {
        open: !state.open,
      };
    });
};
componentDidMount() {
    document.addEventListener("mousedown", this.handleClickOutside);
}

componentWillUnmount() {
  document.removeEventListener("mousedown", this.handleClickOutside);
}

handleClickOutside = event => {
    if (this.container.current && !this.container.current.contains(event.target)){
      this.setState({
        open: false,
      });
    }
};

Answer 1

это то, что я нашел, работает для меня
constructor () {super ();

this.state = {
  showMenu: false,
};

this.showMenu = this.showMenu.bind(this);
this.closeMenu = this.closeMenu.bind(this);

}

showMenu (event) {event.preventDefault ();

this.setState({ showMenu: true }, () => {
  document.addEventListener('click', this.closeMenu);
});

}

closeMenu (событие) {

if (!this.dropdownMenu.contains(event.target)) {

  this.setState({ showMenu: false }, () => {
    document.removeEventListener('click', this.closeMenu);
  });  

}

}