Javascript 实施'；切换类'；使用React的元素列表上的功能

我正在努力实现React中的“切换类”功能。 我有

NavSidebar

组件，它是一个无序列表

ul

。我的

NavListItem

组件是列表项

li

单击列表项时，我需要为单击的

li

提供类名

active

，其他列表元素应获得空类名

以下是我到目前为止的想法：

class NavListItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = { active: false };
  }

  setActive(bool) {
    this.setState({ active: bool });
  }

  render() {
    let index = this.props.key;
    let item = this.props.item;
    return (
      <li className={this.state.active ? 'active' : ''}
          onClick={this.setActive(this.props.setActive).bind(this)} >
        <a href={'#'+item}>{item}</a>
      </li>
    );
  }
}

class NavSidebar extends React.Component {

  constructor(props) {
    super(props);
  }

  render () {

    let items = this.props.navItems.map( (item, index) => {
      return (
        <NavListItem key={index} item={item} setActive={true} />
      );
    });

    return (
        <div className="col-sm-2">
          <nav className="nav-sidebar">
            <ul className="nav">
              {items}
              <li className="nav-divider" />
              <li>
                <a href="#"><i className="glyphicon glyphicon-home"></i> Back Home</a>
              </li>
            </ul>
          </nav>
        </div>
    );
  }
}

NavSidebar.propTypes = {
  navItems: React.PropTypes.array
};

class NavListItem扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={active:false}；
}
设置激活（bool）{
this.setState（{active:bool}）；
}
render（）{
让index=this.props.key；
让item=this.props.item；
返回(


);
}
}
类NavSidebar扩展了React.Component{
建造师（道具）{
超级（道具）；
}
渲染（）{
让items=this.props.navItems.map（（项目，索引）=>{
返回(
);
});
返回(

{items}




);
}
}
NavSidebar.propTypes={
navItems:React.PropTypes.array
};

不幸的是，这不起作用，它甚至从未触及元素的类名，我也无法想出有效的解决方案

---

你能帮我一下吗？

这里没有错误消息

onClick={this.setActive(this.props.setActive).bind(this)}

由于您正在绑定未定义的

，
调用
this.setActive（this.props.setActive）的结果

即使删除绑定，它也不会工作，因为单击处理程序将
未定义。此外，决不能在
render
中修改状态

在任何情况下，由于您要更新多个项目（新选定项目和旧项目），家长应负责此项，并应：


激活单击的项目
停用所有其他
重新呈现列表

类似于此（未经测试）：

class NavListItem扩展了React.Component{
建造师（道具）{
超级（道具）；
}
设置激活（bool）{
this.props.onItemActive（this.props.item）；
}
render（）{
让item=this.props.item；
返回(


);
}
}
类NavSidebar扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={activeItem:null}；
}
（项目）{
this.setState（{activeItem:item}；
}
渲染（）{
让自我=这个；
让items=this.props.navItems.map（（项目，索引）=>{
返回(
);
});
返回(

{items}




);
}
}
NavSidebar.propTypes={
navItems:React.PropTypes.array
};
你能解释一下什么是
this.props.onActivate（this.props.item）；
？它在这一行抛出
无法读取未定义的
的“props”。
this.props.onActivate
是属于传递给子级的父级的回调。
this.props.onActivate（this.props.item）
将使用单击的项作为参数调用它。很抱歉，它是
this.props.onItemActive
已修复。
无法读取行
this.props.onItemActive（this.props.item）的未定义的属性'props'
。顺便说一句，它不会改变元素的类。那是因为我忘记了在ES6类中，React不再自动将此绑定到非React函数。修复了。添加了
。bind（this）
到
onClick={this.setActive.bind（this）}
和
onimactive={this.onimactive.bind（this）}
class NavListItem extends React.Component {
  constructor(props) {
    super(props);
  }

  setActive(bool) {
    this.props.onItemActive(this.props.item);
  }

  render() {
    let item = this.props.item;
    return (
      <li className={this.props.active ? 'active' : ''}
          onClick={this.setActive.bind(this)} >
        <a href={'#'+item}>{item}</a>
      </li>
    );
  }
}

class NavSidebar extends React.Component {

  constructor(props) {
    super(props);
    this.state = {activeItem: null};
  }

  onItemActive(item) {
    this.setState({activeItem: item};
  }

  render () {
    let self = this;
    let items = this.props.navItems.map( (item, index) => {
      return (
        <NavListItem key={index} item={item} 
                     onItemActive={self.onItemActive.bind(self)} 
                     active={item === self.state.activeItem} />
      );
    });

    return (
        <div className="col-sm-2">
          <nav className="nav-sidebar">
            <ul className="nav">
              {items}
              <li className="nav-divider" />
              <li>
                <a href="#"><i className="glyphicon glyphicon-home"></i> Back Home</a>
              </li>
            </ul>
          </nav>
        </div>
    );
  }
}

NavSidebar.propTypes = {
  navItems: React.PropTypes.array
};