javascript - React onClick 状态不会切换回来

Question

我正在使用 React JS 构建菜单栏。单击菜单项时，应打开相应的 megamenu。在 megamenu 外部单击时，它应该自行关闭。我通过切换 megamenu 的状态来弥补这一点。但我也想在第二次单击菜单项时关闭 megamenu(即通过单击菜单项切换关闭和打开 megamenu)。我被困在这里，第二次单击菜单项时，状态没有切换回来。

class Menubar extends React.Component {
  constructor() {
    super();
    this.state = {
      clicked: false
    };
    this.handleClick = this.handleClick.bind(this);
    this.handleOutsideClick = this.handleOutsideClick.bind(this);
  }

  componentWillMount() {
    document.addEventListener('click', this.handleOutsideClick, false);
  }

  componentWillUnmount(){
    document.removeEventListener('click', this.handleOutsideClick, false);
  }

  handleClick() {
    this.setState({clicked: !this.state.clicked});
  }

  handleOutsideClick(){
    if (this.refs.megaMenu.contains(event.target)) {
      } else {
        this.setState({
          clicked: false
        });
      }
   }

   render() {
    return (
      <div className="container">
        <div className="menu-bar">
          {/* Menu*/}
          <div className="menu-bar-item">
            <a className="menu-bar-link" href="#" onClick={this.handleClick}>Points</a>
            <div className={"mega-menu"+" "+this.state.clicked} ref="megaMenu">
              <div className="mega-menu-content">
                <p>Points Menu</p>
              </div>
            </div>
          </div>
        </div>
      </div>
     );
   }
}

ReactDOM.render(
  <Menubar />,
  document.getElementById('example')
);

Codepen Demo

Answer 1

你需要移动 ref="megaMenu" 以便它也包含按钮，否则当你点击按钮时 handleOutsideClick 也会被触发并且你翻转 this .state.clicked 两次。此外，您忘记在 handleOutsideClick 处理程序中传递 event。

class Menubar extends React.Component {
  constructor() {
    super();
    this.state = {
      clicked: false
    };
    this.handleClick = this.handleClick.bind(this);
    this.handleOutsideClick = this.handleOutsideClick.bind(this);
  }

  componentWillMount() {
    document.addEventListener('click', this.handleOutsideClick, false);
  }

  componentWillUnmount() {
    document.removeEventListener('click', this.handleOutsideClick, false);
  }

  handleClick() {
    this.setState({clicked: !this.state.clicked});
  }

  handleOutsideClick(event) {
    if (!this.menu.contains(event.target)) {
      this.setState({
        clicked: false
      });
    }
  }

  render() {
    return (
      <div className="container">
        <div className="menu-bar">

          {/* Menu*/}
          <div className="menu-bar-item" ref={el => this.menu = el}>
            <a className="menu-bar-link" href="#" onClick={this.handleClick}>Points</a>
            <div className={"mega-menu" + " " + this.state.clicked}>
              <div className="mega-menu-content">
                <p>Points Menu</p>
              </div>
            </div>
          </div>

        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <Menubar />,
  document.getElementById('example')
);

我已经修复了你的 Codepen Demo

此外，考虑使用回调引用，如 ref={el => this.menu = el} 这是一种更好的方法。