如何点击菜单外部关闭react-burger-menu？附使用代码示例

刚好我之前研究过这个需求，react-burger-menu本身没有内置点击外部关闭的功能，但我们可以通过监听全局点击事件来实现，核心思路就是判断点击的区域是否在菜单之外，同时菜单处于打开状态时，触发关闭操作。下面是基于你提供的类组件示例修改的完整实现：

首先，我们需要添加状态跟踪菜单的打开状态，以及一个ref来获取菜单的DOM元素：

import { slide as Menu } from 'react-burger-menu';
import React, { Component, createRef } from 'react';

class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      menuOpen: false
    };
    // 创建ref用于获取菜单元素
    this.menuRef = createRef();
  }

接下来，添加处理菜单状态变化的函数，同步更新本地状态：

// 监听菜单状态变化，更新本地state
handleMenuStateChange = (state) => {
  this.setState({ menuOpen: state.isOpen });
};

然后实现点击外部关闭的逻辑，在组件挂载时添加全局点击监听，卸载时移除避免内存泄漏：

componentDidMount() {
  // 挂载时添加全局点击监听
  document.addEventListener('click', this.handleClickOutside);
}

componentWillUnmount() {
  // 卸载时移除监听
  document.removeEventListener('click', this.handleClickOutside);
}

// 处理外部点击的逻辑
handleClickOutside = (event) => {
  // 判断条件：菜单存在 + 点击目标不在菜单内 + 菜单处于打开状态
  if (this.menuRef.current && !this.menuRef.current.contains(event.target) && this.state.menuOpen) {
    this.setState({ menuOpen: false });
  }
};

最后修改render方法里的Menu组件，传入ref、isOpen状态和状态变化回调：

showSettings(event) {
  event.preventDefault();
  // 你的原有逻辑...
}

render() {
  return (
    <Menu
      ref={this.menuRef}
      isOpen={this.state.menuOpen}
      onStateChange={this.handleMenuStateChange}
    >
      <a id="home" className="menu-item" href="/">Home</a>
      <a id="about" className="menu-item" href="/about">About</a>
      <a id="contact" className="menu-item" href="/contact">Contact</a>
      <a onClick={this.showSettings} className="menu-item--small" href="">Settings</a>
    </Menu>
  );
}
}

小提示：如果是用函数式组件开发，逻辑完全一致，只需要把类组件的state换成useState，ref换成useRef，生命周期换成useEffect来绑定和移除监听即可。

内容的提问来源于stack exchange，提问作者Umbro