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

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 为标签
• option 为

.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 事件处理此问题。

假设你有这样的 sn-p ： <div class="dropdown" onBlur={() => this.handleBlur('myModal')}>Some content</div>

现在this.handleBlur

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