React 怎么实现antdesign Dropdown组件 关闭菜单的功能？

Question

两个下拉菜单组件，单独操作点击展开关闭菜单、document点击关闭菜单没问题。但是点<Dropdown />1时 如果<Dropdown />2菜单是打开的 怎么让<Dropdown />2的菜单关闭？

class DropdownMenu extends React.Component {

constructor (props) {
    super(props);
    this.state = {
        showClass: 'hide',
        left: 0,
        top:0,
    }
}
textClick = (e) => {
    e.nativeEvent.stopImmediatePropagation();
    this.setState({
        showClass: 'fadeInUp',
        left: `${offset(this.textDom).left}px`,
        top: `${offset(this.textDom).top + this.textDom.offsetHeight + 10}px`,
    })
}
componentDidMount () {
    document.addEventListener('click', () => {
        this.setState({
            showClass: 'fadeOutDown'
        }, () => {
            // setTimeout(() => {
            //     this.setState({ showClass: 'hide' });
            // }, 300)
        })
    })
}
render() {
    const thisState = this.state;
    return (
        <div className={this.props.className}>
            <div
                ref={textDom => this.textDom = textDom}
                className="eam-dropdown-text clearfix"
                onClick={this.textClick}
            >
                {this.props.html.text}
            </div>
            <div
                onClick={(e) => {e.nativeEvent.stopImmediatePropagation()}}
                className={`eam-dropdown-menu animated ${this.state.showClass}`}
                style={{left: this.state.left, top: this.state.top}}
            >
                {this.props.html.menu}
            </div>
        </div>
    )
}

}

export default DropdownMenu;

Answer 1

利用事件冒泡 把展开关闭都放在document的事件上 按钮点击的时候num++ document点击的时候num++ 如果num是1 那就是document在点击 如果是2... 设置完展开或关闭的状态 num重置为0。

Answer 2

这问题有点奇怪，如果改成点击触发，你说的根本不是问题；

Answer 3

你说的这种叫手风琴效果 网上搜索一下文章很多