Question

如何通过单击菜单外部关闭react-burger-menu？

我使用：https://github.com/negomi/react-burger-menu

import { slide as Menu } from 'react-burger-menu'

class Example extends React.Component {
  showSettings (event) {
    event.preventDefault();
    .
    .
    .
  }

  render () {
    return (
      <Menu>
        <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>
    );
  }
}

Answer 1

好的。因此，如果您遇到同样的问题，那么在使用onClick来更改菜单状态时却遇到了问题，但是重新加载了页面却又失去了很好的过渡效果，请执行此操作。

除了更改菜单状态外，只需单击叠加层就好像您要关闭菜单一样，方法是单击上一页：

let element: HTMLElement = document.getElementsByClassName("bm-overlay")[0] as HTMLElement;
    element.click();

在您更新反应汉堡菜单并且突然之间'bm-overlay'不再存在的情况下，此解决方案可能无法证明是将来，但这似乎不太可能，并且每次都可以使用。这样，您可以让菜单本身独自处理“ isOpen”的状态。

Answer 2

我没有提供完整的解决方案。但是似乎来自react-burger-menu的菜单组件具有名为isOpen的道具。您实际上可以根据用例进行修改和使用。 https://github.com/negomi/react-burger-menu/wiki/FAQ#i-want-to-control-the-open-state-programmatically-but-i-dont-understand-how-to-use-the-isopen-prop

Answer 3

您将从 react-burger-menu 上获得 .bm-overly 课。

注意：点击该叠加层会自动关闭汉堡菜单但您需要按如下所示将覆盖图扩展到整个屏幕上

如果您正在使用左侧对齐的菜单：

.bm-overlay {
  background: rgba(255, 255, 255, 0.3);
  top: 0px;
  right: 0px;
}

如果您使用的是右侧菜单对齐方式：

.bm-overlay {
  background: rgba(255, 255, 255, 0.3);
  top: 0px;
  left: 0px;
}

如何通过单击菜单外部关闭“ react-burger-menu”？

3 个答案: