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

我会带着你远行 2023-06-28 11:29 22阅读 0赞

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

前者比较容易实现, 在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.  把点击方法绑定在按钮上, 即可