Javascript Reactjs：从<；获取活动元素名称；ul>；在页眉中

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

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

React.createClass({
getInitialState:函数（）{
返回{
标签：错误，
导航状态：“导航关闭”
}
},
handleClick:function（）{
if（this.state.tab）{
这是我的国家({
标签：错误，
导航状态：“导航关闭”
})
}否则{
这是我的国家({
没错，
导航状态：“导航打开”
})
}
},
render:function（）{
返回(
标题`
/*（此处应显示活动元素名称）*/

路径1
路径2

{this.props.children}
)
}
})

在代码示例中，我试图获取当前活动的链接（路径1或路径2）来代替“HEADER”

---

有什么建议或建议我应该查看吗？

您可以通过访问作为参数传递给

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

React.createClass({
getInitialState:函数（）{
返回{
海德：“，
标签：错误，
导航状态：“导航关闭”
}
},
handleClick:函数（e）{
让header=e.currentTarget.innerHTML；
if（this.state.tab）{
这是我的国家({
标签：错误，
导航状态：“导航关闭”，
标题
})
}否则{
这是我的国家({
没错，
导航状态：“导航打开”，
标题
})
}
},
render:function（）{
返回(
{this.state.header}

路径1
路径2

{this.props.children}
)
}
})

不确定我是否正确理解了你的问题。考虑将标题参数添加到单击处理程序。

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

---

在切换元素的类（或属性）之前，在事件上处理对目标的取消单击。 检查这个例子

const NavBar=React.createClass({
handleClick（e）{
让nav=document.queryselectoral（“#nav li”）
Array.from（nav.map）（列表=>{
list.classList.toggle（'active'，false）
})
e、 target.classList.toggle（'active'，true）
让getActiveLink=document.querySelector（'.active'））
log（getActiveLink.innerText）
},
render（）{
返回（

链接一
链接二
链接树
）
}
})
ReactDOM.render（，document.getElementById（'foo'））

为什么OP需要手动更改DOM？react虚拟dom的全部要点是用户不需要手动更改dom。@Yury Tarabanko这个家伙想要在“活动”链接中获取文本，这是一个动态的例子。我认为@Yury Tarabanko的意思是：

list.classList.toggle（'active'，false）

是一个不好的做法。这不是一种反应方式，也不是。OP希望显示由于当前实现而仅在DOM中可用的一些数据。没有理由让事情变得更糟。这是一个干净的方法吗？因为当有点击标题时也会调用句柄点击。。将来也会在切换图标上。我知道您需要将链接内容复制到标题，因为您已经硬编码了路径1和路径2。如果不是这样的话，请看一下@Yury提供的建议。这样可能更干净。或者您可以为不同的链接分离处理程序。我尝试了Jquery（“.navigation bar li>.active”）.text（），它可以工作。。。但是，当我们租用url时，文本保持不变，而不是重置为初始值。在react应用程序中通过jquery使用dom操作不是一个好主意。好的。。我想，因为我们使用的是let header=e.currentTarget.innerHTML，所以使用的是let header=Jquery（“.navigation bar li>.active”）.text（）；不会有任何伤害我一直在玩弄这个。由于有一个ajax请求附加到此组件，因此在this.setState内部将导致递归错误。

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