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

问题描述

问 题

两个下拉菜单组件，单独操作点击展开关闭菜单、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;

这个问题已被关闭，原因：问题质量差 - 问题太水、伸手党

解决方案

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

这篇关于react.js - React 怎么实现antdesign Dropdown组件 关闭菜单的功能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！