Question

我使用react创建了一个简单的下拉按钮，它工作正常，但现在我想使用相同的逻辑在另外两个按钮上使用它。

我如何采用我在第一个下拉菜单中使用的相同逻辑，并在其他两个

元素中使用第二个下拉菜单和第三下拉菜单？

以下是显示操作代码的链接：http://codepen.io/rkhayat/pen/e3581b3625fc6b6f8fa5a8dab2a28a41

这是我的代码：

class Header extends Component {

constructor(props){
    super(props) 
        this.state = {
            open:false
    }
}

_handleDropDown(){
    this.setState({
        open: !this.state.open
    })
} 

render() {
    return (
        <nav className="navbar">
                    <ul>

                        <li>
                            <div onClick={this._handleDropDown.bind(this)} className="dropdown open">
                            <button className="btn btn-link dropdown-toggle "type="button" > 1st Dropdown menu</button>
                               {
                               this.state.open 
                               ?
                               <ul className="dropdown-menu">
                                   <li><a href="#">Adventure Tours</a></li>
                                   <li><a href="#">Airport transfers</a</li>
                                   <li><a href="#">Car rental</a></li>
                                   <li><a href="#">Sightseeing tours</a</li>
                                 </ul>
                                 :
                                 null
                                }
                            </div>  
                        </li>

                        <li><a href="#">2nd Dropdown menu</a></li>
                        <li><a href="#">3rd Dropdown menu</a></li>                          
                    </ul>
        </nav>
    )
  }
}

更新：

我提出了一个有效的解决方案，但我不知道它是否是最佳做法：

以下是代码：

class Header extends Component {
    constructor(props){
        super(props) 
            this.state = {
              open:false,
              open2:false
          }
      }

 _handle1stDropDown(){
      this.setState({
          open: !this.state.open
      })
  }

  _handle2ndDropDown(){
      this.setState({
          open2: !this.state.open2
      })
  } 

  render() {
      return (
           <nav className="navbar">
                      <ul>
                         <li>
                              <div onClick={this._handle1stDropDown.bind(this)} className="dropdown open">
                              <button className="btn btn-link dropdown-toggle "type="button" > 1st Dropdown menu</button>
                                 {
                                 this.state.open 
                                 ?

                                  <ul className="dropdown-menu">
                                     <li><a href="#">1st dropdown 1st li</a></li>
                                     <li><a href="#">1st dropdown 2nd li</a</li>
                                     <li><a href="#">1st dropdown 3rd</a></li>
                                     <li><a href="#">1st dropdown 4th</a</li>
                                  </ul>

                                  :
                                   null
                                  }
                              </div>  
                          </li>

                          <li>
                              <div onClick={this._handle2ndDropDown.bind(this)} className="dropdown open">
                              <button className="btn btn-link dropdown-toggle "type="button" > 2nd Dropdown menu</button>
                                 {
                                 this.state.open 
                                 ?

                                 <ul className="dropdown-menu">
                                     <li><a href="#">2nd dropdown 1st li</a></li>
                                     <li><a href="#">2nd dropdown 2nd li</a</li>
                                     <li><a href="#">2nd dropdown 3rd li</a></li>
                                     <li><a href="#">2nd dropdown 4th li</a</li>
                                  </ul>

                                  :
                                   null
                                  }
                              </div>  
                          </li>

                      </ul>
          </nav>
      )
    }
  }

Answer 1

您需要做的是将按钮和下拉列表提取到自己的组件中。为了使其工作，您需要使它们成为可组合的组件，这意味着您将下拉列表中的项目作为道具传递。我做了一个表示我的意思的代码

http://codepen.io/finalfreq/pen/ozBxrZ

class Dropdown extends React.Component {
  constructor(props) {
    super()
  }

  createItems() {
   return this.props.items.map(function(item, index) {
     return <li> <a href="#"> {item.title} </a></li>
   })
  }

  render() {
    var items = this.createItems();
    return (
      <div onClick={this.props.onClick} className="dropdown open">
        <button className="btn btn-default dropdown-toggle" type="button">
          Dropdown
          <span className="caret" />
        </button>
             {
        this.props.open
        ?
            <ul className="dropdown-menu">
            {items}
            </ul>
               :
            null
          }
          </div>
      )
  }
}

你必须根据自己的需要对其进行自定义，但你可以在任何地方放置下拉，只需要给它正确的道具

如何在多个<li>元素中使用此下拉列表逻辑？

1 个答案: