React JS onClick打開當前下拉菜單

Question

我有在陣營JS下拉菜單中的n個。 當我點擊第n個菜單項時，我想打開相應的下拉菜單。 但我現在得到的是，點擊菜單項后，所有下拉菜單都會打開。 如何實現這一目標？

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.refs.megaMenu.contains(event.target)) {
      this.setState({
                clicked: false
            });
        } 
  }
  render() {
    return (
      <div className="container">
        <div className="menu-bar">

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

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

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

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

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

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

Codepen演示在這里

Answer 1

您已經使用了單個狀態，即單擊所有菜單項，這將在調用setState時對所有菜單進行分解。

您應該有單獨的狀態來檢查每個菜單項的點擊次數。 或者說一個數組說點擊[]。 然后更改特定單擊狀態的值。 例如：......

<div className="menu-bar-item" ref="megaMenu">
            <a className="menu-bar-link" href="#" onClick={this.handleClick.bind(this,1)}>Second Menu</a>
            <div className={"mega-menu"+" "+this.state.clicked[1]}>
              <div className="mega-menu-content">
                <p>Second Menu</p>
              </div>
            </div>
          </div>

....並將handleClick定義為

 handleClick(index,e) {
  let clicked=this.state.clicked;
    clicked[index]=!clicked[index]
    this.setState({clicked:clicked});
  }

這是codepen鏈接： http ：//codepen.io/anon/pen/oLRbmq

Answer 2

由於此<div className={"mega-menu"+" "+this.state.clicked}> ，所有下拉列表都被選中，它們都使用來自狀態的相同變量 - clicked ，因此如果您單擊一個全部它們會改變狀態。如果您只想要選擇特定的下拉列表，則需要在狀態中為每個相應的下拉元素聲明一個新變量，並相應地更改邏輯handleClick 。