antd实现点击按钮隐藏输入框_React怎样实现点击其他地方隐藏弹出的菜单

我们经常遇到这种需求: 点击导航栏弹出菜单, 点击其他地方收回菜单.

前者比较容易实现, 在onClick中可以设置state, 通过state来判断组件的className进而实现菜单组件的显示与隐藏.

后者, 点击其他地方收回菜单, 应该怎么弄呢?

比较好的实现方法步骤如下:

在componentDidMount()中添加document的监听事件, 监听全局的click

componentDidMount() {

document.addEventListener('click', this.hideAllMenu);

}

hideAllMenu = () => {

this.setState({

checkBtnMenu: false,

newBtnMenu: false,

mineBtnMenu: false,

})

}

2.点击按钮显示菜单, 但是要在点击按钮时就把时间冒泡阻断, 防止触发全局点击隐藏菜单的方法. 注意此处阻断冒泡的方法应该这样写:e.nativeEvent.stopImmediatePropagation();

showCheckMenu = (event) => {

this.stopPropagation(event);

this.setState({

checkBtnMenu: !this.state.checkBtnMenu,

newBtnMenu: false,

mineBtnMenu: false,

})

}

showNewMenu = (event) => {