javascript - 如何在单击按钮时打开和关闭下拉菜单，但同时与外部单击关闭？

Question

我有下拉菜单，它在 btn 单击时打开。

  toggleAllCategories() {
    this.setState({ isOpenAllCategories: !this.state.isOpenAllCategories });
  }

此外，在外部点击下拉菜单已关闭。

  handleClickOutside(event) {
    if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
      this.toggleAllCategories();
    }
  }

但问题是我无法通过单击按钮打开和关闭下拉菜单。

当我点击两次按钮下拉菜单仍然打开时，外部点击实现的原因。

如何同时在按钮上设置 togglebleDroopdown 并在外部点击时关闭？

STACKBLITZ 现场示例: https://stackblitz.com/edit/react-coihzv?file=index.js

这是下拉列表和整个相关逻辑的组件和整体实现:

class AllCategories extends Component {
  constructor(props) {
    super(props);

    this.state = {
      allCategories: getAllCategoriesList(),
      isOpenAllCategories: false
    };
  }

  componentDidMount() {
    document.addEventListener('mousedown', this.handleClickOutside.bind(this));
  }

  componentWillUnmount() {
    document.removeEventListener('mousedown', this.handleClickOutside.bind(this));
  }

  setWrapperRef(node) {
    this.wrapperRef = node;
  }

  handleClickOutside(event) {
    if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
      this.toggleAllCategories();
    }
  }

  toggleAllCategories() {
    this.setState({ isOpenAllCategories: !this.state.isOpenAllCategories });
  }

  render() {
    return (
      <Fragment>
        <AllCategoriesButton toggleAllCategories={this.toggleAllCategories} />

        {this.state.isOpenAllCategories ? (
          <div className="all-categories-wrapper" ref={(node) => this.setWrapperRef(node)}>
            <div className="all-categories">
              <ul className="all-categories-list">
                <li className="all-categories-list-item">All Categories</li>
                {this.state.allCategories.map((category) => (
                  <li
                    className={`all-categories-list-item ${
                      category.selected ? 'all-categories-list-item-active' : ''
                    }`}
                  >
                    {category.name}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        ) : (
          ''
        )}
      </Fragment>
    );
  }
}

Answer 1

您可以使用 event.target.tagName 检查触发点击的元素。

因此，为了防止切换两次，您可以执行以下操作:

 handleClickOutside(event) {
    if (this.wrapperRef && !this.wrapperRef.contains(event.target) &&event.target.tagName.toLowerCase() !== 'button') {
      this.toggleAllCategories();
    }
  }

---

编辑:另一种方法

• 为按钮创建一个 ref，将其命名为 buttonRef。

现在将 handleClickOutside 更新为:

handleClickOutside(event) {
    if (this.wrapperRef && !this.wrapperRef.contains(event.target) &&event.target !== buttonRef.current) {
      this.toggleAllCategories();
    }
  }

这将是更合适的方式。

希望对您有所帮助!