Reactjs 按钮在我单击时不显示菜单

我正在尝试实现一个显示菜单按钮。问题是，当我单击“显示菜单”时，什么都没有发生。有人能帮我解决这个问题吗？我只需要在单击时显示元素。也许我在函数中写了一些错误，因为代码有点长，而且我是reactjs的初学者。谢谢

import React, { Component } from 'react';
import Button from '@material-ui/core/Button';
import FetchRandomBet from "./fetchRandomBets";

const options = [
    { value: 1, label: 'less than 2' },
    { value: 2, label: 'more than 2' },
];

class Betslip extends Component {
    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(event) {

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

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

        }
    }

    render() {
        return (

            <div className="betslip">

                <div className="betslip-top">
                    <h1 className="text">BETSLIP</h1>
                    <p className="text-two">BET WITH US!</p>

                    <div>
                        <button onClick={this.showMenu}> Show menu</button>
                        {this.state.showMenu ?
                            (<div className="menu" ref={(element) => { this.dropdownMenu = element; }}>
                                <button> Menu item 1 </button>
                                <button> Menu item 2 </button>
                                <button> Menu item 3 </button>
                            </div>) : (null)}
                    </div>
                </div>

                <div>
                    <FetchRandomBet value={options} />
                </div>

                <Button className="betnow" variant="contained">
                    Bet Now!
                </Button>
            </div>
        );
    }
}

export default Betslip;

import React，{Component}来自'React'；
从“@material ui/core/Button”导入按钮；
从“/fetchRandomBets”导入FetchRandomBet；
常量选项=[
{值：1，标签：'小于2'}，
{值：2，标签：'超过2'}，
];
类扩展组件{
构造函数（）{
超级（）；
此.state={
showMenu:false，
};
this.showMenu=this.showMenu.bind（this）；
this.closeMenu=this.closeMenu.bind（this）；
}
显示菜单（事件）{
event.preventDefault（）；
this.setState（{showMenu:true}，（）=>{
document.addEventListener（'click'，this.close菜单）；
});
}
关闭菜单（事件）{
如果（！this.dropdownMenu.contains（event.target））{
this.setState（{showMenu:false}，（）=>{
document.removeEventListener（'单击'，此.Close菜单）；
});
}
}
render（）{
返回(
贝特利普
与我们打赌
显示菜单
{this.state.showMenu？
（{this.dropdownMenu=element；}}>
菜单项1
菜单项2
菜单项3
)：（空）}
现在打赌！
);
}
}
出口违约金；