Question

我有一个在btn点击时打开的下拉菜单。

func fromBase64() -> String? {
    guard let data = Data(base64Encoded: self) else {
      return nil
    }

    return String(data: data, encoding: .utf8)
  }

在外部点击下拉菜单上也被关闭。

  toggleAllCategories() {
    this.setState({ isOpenAllCategories: !this.state.isOpenAllCategories });
  }

但是问题是我无法单击按钮来打开和关闭下拉菜单。

当我在按钮下拉列表上单击两次仍处于打开状态时，会单击外部按钮。

如何在按钮上设置togglebleDroopdown并同时单击外部关闭？

STACKBLITZ实时示例： https://downloads.gradle-dn.com/distributions/gradle-3.4.2-all.zip

这是下拉列表的组件和整个实现以及相关的逻辑：

  handleClickOutside(event) {
    if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
      this.toggleAllCategories();
    }
  }

Answer 1

您可以使用event.target.tagName检查触发点击的元素。

为防止两次切换，您可以执行以下操作：

 handleClickOutside(event) {
    if (this.wrapperRef && !this.wrapperRef.contains(event.target) &&event.target.tagName.toLowerCase() !== 'button') {
      this.toggleAllCategories();
    }
  }

编辑： 另一种方法

为按钮创建参考，将其命名为buttonRef。

现在将handleClickOutside更新为此：

handleClickOutside(event) {
    if (this.wrapperRef && !this.wrapperRef.contains(event.target) &&event.target !== buttonRef.current) {
      this.toggleAllCategories();
    }
  }

这将是更合适的方式。

希望这会有所帮助！

Answer 2

在按钮单击的情况下，toggleAllCategories被触发两次。一次点击按钮，另一次点击handleClickOutside。您需要从一个地方调用

如何在btn-click上打开和关闭下拉菜单，但同时单击外部单击关闭？

2 个答案: