React怎样实现点击其他地方隐藏弹出的菜单

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

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

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

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

1. 在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();
    }

1. 把点击方法绑定在按钮上, 即可