Question

我正在尝试为移动设备构建一个长导航栏，我正在以手风琴风格开发它。第一个视图将具有当前活动的链接名称。用户点击此活动链接名称时，会在下面展开并列出其他可用链接。

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）来代替＆＃34; HEADER＆＃34;

我应该注意什么建议或意见？

Answer 1

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

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>)
  }
})

Answer 2

不确定我是否正确理解了您的问题。考虑为click handler添加caption参数。

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

或者更好地将links数组添加到组件状态，并根据其值生成所有链接。

 <ul role="nav">
    {this.state.links.map(link => (
      <li key={link.to} onClick={() => this.handleClick(link.caption)}>
          <Link ... to={link.to} >{link.caption}</Link>
      </li>
    ))}
 </ul>

Answer 3

在切换元素的类（或属性）之前，您可以在事件上处理de click to target。查看此示例。

const NavBar = React.createClass({
  handleClick(e){
    let nav = document.querySelectorAll('#nav li')
    Array.from(nav).map(list =>{
      list.classList.toggle('active', false)
    })
    e.target.classList.toggle('active', true)
    
    let getActiveLink = document.querySelector('.active')
    console.log(getActiveLink.innerText)
  },
  render(){
    return(<ul id='nav'>
             <li onClick={ this.handleClick }>Link one</li>
             <li onClick={ this.handleClick }>Link two</li>
             <li onClick={ this.handleClick }>Link tree</li>
           </ul>)
  }
})
   
ReactDOM.render(<NavBar/>, document.getElementById('foo'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='foo'><div>

Reactjs：从<ul>获取活动元素名称到标题

3 个答案: