Javascript 如何通过在菜单外单击来关闭“react burger menu”（反应汉堡菜单）？

如何通过在菜单外单击来关闭

反应汉堡菜单

我使用：

从“反应汉堡菜单”导入{幻灯片作为菜单}
类示例扩展了React.Component{
showSettings（活动）{
event.preventDefault（）；
.
.
.
}
渲染（）{
返回(
);
}
}

我没有提供完整的解决方案。但似乎从反应汉堡菜单菜单组件有一个道具称为isOpen。您可以根据您的用例实际修改和使用它。

---

好的。因此，如果您遇到与我相同的问题，即使用onClick更改菜单状态有效，但重新加载页面，并且您失去了良好的过渡效果，请执行此操作

不要更改菜单状态，只需单击覆盖，就好像通过单击所处页面上的“上一步”关闭菜单一样：

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

---

如果您更新了react burger菜单，突然“bm覆盖”不再存在，那么这个解决方案可能不会是未来的证明，但这似乎不太可能，而且每次都应该有效。通过这种方式，您可以让菜单自行处理“isOpen”的状态。

您将从react burger菜单获得.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;
}

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

.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;
}

---

表示“您可以使用disableOverlayClick禁用覆盖单击事件（即阻止覆盖单击关闭菜单）。”因此，您要求的行为是默认行为。可能是因为您没有按照设置说明完成操作而中断：@Quentin，但我看不到覆盖。我点击菜单旁边，但它没有；如何通过在菜单外单击来调用函数？