javascript - react : Getting active element name from in to the header

Question

我正在尝试为移动设备构建一个长导航栏，并且我正在以 Accordion 风格开发它。第一个 View 将具有当前事件的链接名称。用户单击此事件链接名称时，它会在下方展开并列出其他可用链接。

React.createClass({
    getInitialState: function() {
        return {
          tab: false,
          navState: "nav-closed"
        }
      },
      handleClick: function() {
        if (this.state.tab) {
          this.setState({
            tab: false,
            navState: "nav-closed"
          })
        } else {
          this.setState({
            tab: true,
            navState: "nav-open"
          })
        }
      },
      render: function() {
        return (<div>
        <div className ="navbar-container">
        <div onClick = {this.handleClick}>HEADER` 
          /*  (should display active element name here) */
        </div>
        <div className = {this.state.navState}>
        <ul role="nav">
              <li onClick = {this.handleClick}><Link activeClassName="active" to="path1">PATH 1</Link></li>
              <li onClick = {this.handleClick}><Link activeClassName="active" to="/path2">PATH 2</Link></li>
            </ul>
        </div>
        </div>
            {this.props.children}
      </div>)
      }
    })

在代码示例中，我试图获取当前事件的链接(PATH1 或 PATH2)来代替“HEADER”

有什么我应该关注的建议或意见吗？

Answer 1

您可以通过访问作为参数传递给 handleClick 方法的事件对象的 currentTarget.interHtml 属性来获取点击链接的文本:

handleClick: function(e) {
  console.log(e.currentTarget.innerHTML); // should log PATH 1 or PATH 2
  //...
}

所以我可以这样建议:​​

React.createClass({
  getInitialState: function() {
    return {
      heder: '',
      tab: false,
      navState: "nav-closed"
    }
  },
  handleClick: function(e) {
    let header = e.currentTarget.innerHTML;
    if (this.state.tab) {
      this.setState({
        tab: false,
        navState: "nav-closed",
        header
      })
    } else {
      this.setState({
        tab: true,
        navState: "nav-open",
        header
      })
    }
  },
  render: function() {
    return (<div>
    <div className ="navbar-container">
    <div onClick = {this.handleClick}>{this.state.header}
    </div>
    <div className = {this.state.navState}>
    <ul role="nav">
          <li onClick = {this.handleClick}><Link activeClassName="active" to="path1">PATH 1</Link></li>
          <li onClick = {this.handleClick}><Link activeClassName="active" to="/path2">PATH 2</Link></li>
        </ul>
    </div>
    </div>
        {this.props.children}
  </div>)
  }
})