javascript - 单击任意位置以关闭 react 中的下拉菜单

Question

我在一个页面上有多个自定义构建下拉组件。我使用 setState 触发列表项打开

toggleDropdown = (id) => {
        this.setState(prevState => ({
            [`dropdown${name}`]: !prevState[`dropdown${id}`] //dropdownA, dropdownB, dropdownC and so on
        }))
    }

如果在菜单打开时单击下拉菜单，这也会切换它。但是后来我有几个下拉菜单，如果我打开一个下拉菜单，其他下拉菜单不会关闭，如何解决这个问题？我在 componentWillMount 中使用“hacky”方式混合与 jquery 的 react ，在 body 上绑定(bind)点击事件，检查下拉项是否可见，如果是则关闭它。

我的问题是，是否有更好的做法来避免使用 jquery？

Answer 1

我的建议是您使用合成事件 onFocus 和 onBlur 来触发打开/关闭状态。 onFocus 将在单击元素时触发，onBlur 将在“取消聚焦”(单击外部)时触发。参见 docs .

此外，tabIndex 属性/prop 是焦点/模糊在非输入类型元素上工作所必需的。

我可以推荐查看 source of react-select以及他们如何处理聚焦/模糊。

这是一个例子，你可以看到它的演示here

import React from "react";

class Dropdown extends React.Component {
  state = {
    open: false
  };

  toggleDropdown() {
    this.setState({ open: !this.state.open });
  }

  render() {
    return (
      <div
        style={{ border: "1px solid #CCC" }}
        onBlur={() => this.toggleDropdown()}
        onFocus={() => this.toggleDropdown()}
        tabIndex="0"
      >
        Dropdown
        {this.state.open && (
          <div>
            <div>Red</div>
            <div>Green</div>
            <div>Blue</div>
          </div>
        )}
      </div>
    );
  }
}

export default Dropdown;