通过ID下拉不同组件的Ref数组

Question

当我有评论列表时，像这样：

每个选项都有一个下拉菜单，用户可以编辑或删除任何评论。

因此，当我打开其中一个时，将显示下拉列表：

问题是，当用户确实在页面的其他位置单击时，该下拉菜单应该关闭，但不会...仅在用户确实单击图标时才关闭...我想知道如何删除该点击事件...并非总是单击图标将其关闭。

如果有人需要，这里有example一点！

Answer 1

您需要添加事件监听器，以跟踪页面上发生的所有click事件。每当事件触发时，应用程序都会确定事件目标是否来自popover div内部，否则，它将关闭弹出窗口。

  componentDidMount() {
    document.addEventListener("mousedown", this.handleClickOutsideToClose);
  }

  componentWillUnmount() {
    document.addEventListener("mousedown", this.handleClickOutsideToClose);
  }

  handleClickOutsideToClose = e => {
    let toClose = true;
    this.dropdown.forEach(dropdown => {
      if (dropdown.contains(e.target)) {
        toClose = false;
      }
    });

    if (toClose) {
      this.handleCloseAll();
    }
  };

 handleCloseAll = () => {
    console.log("close all");
    this.dropdown.map(dropdown => {
      dropdown.classList.remove("is-active");
    });
  };

查看代码sandbox进行实时演示。我还对您的handleOpenDropdown函数做了一些小的更改，以便在给定的时间只能打开一个下拉菜单。

希望这会有所帮助。