javascript - 按 id 引用下拉列表不同组件的数组

Question

当我有一个评论列表时，像这样:

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

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

问题是当用户点击页面的其他地方时，下拉菜单应该关闭，但它没有...只有当用户点击图标时才会关闭...我想知道如何删除那个点击事件...不总是点击图标来关闭它。

这里有点example如果有人需要的话!

Answer 1

您需要添加一个事件监听器来跟踪页面上发生的所有点击事件。每当事件触发时，应用程序都会决定事件目标是否来自弹出框 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 函数做了一些小改动，以便在给定时间只能打开一个下拉菜单。

希望这对您有所帮助。