小编aer*_*ugo的帖子

我对React和Javascript都很陌生,我已经开始通过构建一个简单的可折叠菜单来学习它.它按预期工作,除了我无法弄清楚如何一次只突出显示一个项目.我怀疑onClick方法和状态必须由比sectionItem更高级别的类所拥有,但我真的陷入了如何使这项工作.我的第一直觉就是每次点击某些内容时迭代菜单中的所有项目,并确保所有其他项目都切换为active = false.

这是考虑这个问题的正确方法吗？在这种情况下,有人可以解释一下状态如何在React中运行,以及我应该如何在这里实现它？

整个代码可在此处获得:codepen.io上的菜单

这是我想要突出显示的项目的代码.我还没有能够实现一次只突出显示一个项目.

var SectionItem = React.createClass({
  handleClick: function(){
    if(!this.state.active) {
      this.setState({
        currentItem: this,
        active: true,
        class: "sectionitem active"});
    }
  },
  getInitialState: function(){
     return {
       active: false,
       class: "sectionitem"
     }
  },
  render: function() {
    return (
        <div className={this.state.class} onClick={this.handleClick}>{this.props.title}</div> 
    );
  }
});