javascript - 如何在按钮单击时切换下拉菜单并在外部单击时关闭下拉菜单？

Question

我有下拉菜单，通过单击按钮打开它，并在外部单击时关闭。

这是切换下拉菜单的功能:

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

这意味着通过单击按钮您应该打开和关闭下拉菜单。

但与此同时，我已经使用 react-refs 实现了单击下拉菜单正文之外的 ---> 关闭下拉菜单。

使错误 - 再现:

第 1 步:点击“所有类别”按钮

结果:下拉菜单已打开

第 2 步:再次点击“所有类别”按钮 - 因为想要关闭下拉列表

结果:结果下拉列表已打开。

1. 点击“所有类别”按钮(状态更改为 isOpenAllCategories = true)

问题就在这里 --> 2. 再次单击“所有类别”btn

• 首先调用 handleOutsideClick() 函数，该函数将 isOpenAllCategories 设置为 false。

• 然后调用 toggleAllCategories() ，它会更改与当前值相反的状态 isOpenAllCategories: !this.state.isOpenAllCategories ，即 true cus handleOutsideClick() 已经在 false 上更改状态。

如何在按钮点击时切换下拉菜单并在外部点击时关闭下拉菜单？

所有类别下拉组件:

class AllCategories extends Component {

  componentDidMount() {
    document.addEventListener('mousedown', (e) => this.handleClickOutside(e));
  }

  componentWillUnmount() {
    document.removeEventListener('mousedown', (e) => this.handleClickOutside(e));
  }

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

  handleClickOutside = (event) => {
    if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
      this.props.closeAllCategories();
    }
  };

  render() {
    return (
      <div className="all-categories-wrapper">
        <div className="all-categories" ref={(node) => this.setWrapperRef(node)}>
          <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>
    );
  }
}

所有类别按钮组件:

export default ({ toggleAllCategories, className }) => (
  <div className="category" onClick={() => toggleAllCategories()} role="button">
    <div className={`category-button-wrapper ${className}`}>
      <button className="category-button">
        Sports <span className="category-button-slash">/</span> Football
      </button>
      <div className="category-icon-box">
        <span className="category-icon">
          <i className="material-icons md-30 md-white">expand_more</i>
        </span>
      </div>
    </div>
  </div>
);

Answer 1

由于组件函数中 this 的范围，代码无法正常工作。您必须在组件的构造函数中绑定(bind)函数。或者将您的函数更改为 ES6 这将解决问题

//binding
constructor(props){
  super(props)
this.handleClickOutside = this.handleClickOutside.bind(this);
}
handleClickOutside = () => {
 //code here
}