点击任意位置以关闭下拉列表

Question

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

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

如果在菜单打开时单击下拉列表,也会切换它.但是接下来我还有更多的下拉菜单,如果我打开一个下拉列表,其他下拉列表将不会关闭,如何解决这个问题？我做了一个"hacky"方式混合使用componentWillMount中的jquery,绑定body上的click事件,检查下拉项是否可见,如果是,则关闭它.

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

Answer 1

我的建议是你使用合成事件onFocus并onBlur触发打开/关闭状态.onFocus将在单击元素时触发,并onBlur在"无焦点"(单击外部)时触发.查看文档.

还tabIndex需要属性/丙用于聚焦/模糊到非输入型元件工作.

我可以推荐查看反应选择的来源以及它们如何处理聚焦/模糊.

这是一个例子,你可以在这里看到它的演示

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;