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. 把點擊方法綁定在按鈕上, 即可