如何使下拉菜单仅在点击后关闭？

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 for

.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 });
};