我们经常遇到这种需求: 点击导航栏弹出菜单, 点击其他地方收回菜单.
前者比较容易实现, 在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) => {
this.stopPropagation(event);
this.setState({
checkBtnMenu: false,
mineBtnMenu: false,
newBtnMenu: !this.state.newBtnMenu,
})
}
showMineMenu = (event) => {
this.stopPropagation(event);
this.setState({
checkBtnMenu: false,
newBtnMenu: false,
mineBtnMenu: !this.state.mineBtnMenu,
})
}
stopPropagation(e) {
e.nativeEvent.stopImmediatePropagation();
}
- 把点击方法绑定在按钮上, 即可
