javascript - 如何使下拉菜单仅在点击外部时关闭？

Question

我有多选下拉菜单，问题是当用户选择一项时 - 下拉菜单关闭。

如何使下拉菜单仅在外部点击时关闭？

下拉菜单由 html ul > li 制作:

// Here we loop trough list of filters and render options as <li> tags
 <ul name="filters" className="dropdown">
    {subFilters.map((filter, i) => (
      <li
        defaultChecked={filter.name}
        onClick={() => handleSelect(filter)}
        className={`option`}>
        <span>{filter.name}</span>
      </li>
    ))}
  </ul>

CSS 部分 - 使用的类是:

• 标签的下拉菜单
• 选项

.dropdown {
  display: flex;
  flex-direction: column;
  min-width: 11rem;
  position: absolute;
  z-index: 1;
  font-size: 16px;
  border-radius: 3px;
  border: solid 1px #dee1e5;
  box-shadow: 0 9px 8px rgba(0, 0, 0, 0.05);
  background-color: white;
  outline: none;
  cursor: pointer;
}

.option {
  list-style-type: none;
  padding: 10px 10px 10px 0;
  margin-left: 2.6rem;
}

该下拉菜单如下所示:

Answer 1

您可以通过onBlur来处理这个问题事件。

假设您有这样的片段: <div class="dropdown" onBlur={() => this.handleBlur('myModal')}>Some content</div>

现在this.handleBlur

handleBlur = modalName => {
    this.setState({ [modalName]: false });
};