Reactjs 根据react上的键更改类名

我想根据通过键传递的信息更改列表项的类名。但很明显我做错了什么

每次点击我都想用key更新状态，然后基于这个状态我想将类名设置为active，activecss应该改变列表项的样式

类头扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
活动索引：0
}
this.ChangeColor=this.ChangeColor.bind（this）；
}
更改颜色（键）{
这是我的国家({
activeIndex:key
})
console.log（this.state.activeIndex）
}
render（）{
返回(
Home
功能
它的工作原理
)
}
}
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
}
render（）{
返回(
)
}
}
ReactDOM.render（，document.querySelector（#app））

#标题{
溢出：隐藏；
背景色：#F4；
填充：20px 10px；
}
#钮扣{
浮动：对；
}
#按钮>.active{
背景色：#008CBA；/*绿色*/
边界半径：5px；
颜色：白色；
填充：10px 10px；
文本对齐：居中；
显示：内联块；
字体大小：16px；
利润：2倍
}
#按钮>li{
背景色：白色；
边界半径：5px；
颜色：#008CBA；
填充：10px 10px；
文本对齐：居中；
显示：内联块；
字体大小：16px；
利润：2倍
}
#按钮>li：悬停{
光标：指针；
}

---

您需要将键/索引传递到每个项目的“更改颜色”功能中

onClick={（）=>this.ChangeColor（0）}

onClick={（）=>this.ChangeColor（1）}

等等

---

那么您所做的应该可以工作了

程序不能工作的原因是您在调用

ChangeColor

时没有传递任何键。因此，在第一次单击后，

activeIndex

将被取消定义。您需要修改这三行，如下所示，以确保

ChangeColor

知道所单击项目的键。请注意，您不能像这样直接调用函数

this.ChangeColor（0）

this.ChangeColor（0）}>Home
this.ChangeColor（1）}>功能
this.ChangeColor（2）}>它的工作原理

我明白了。我认为放置key={0}可以解决我的问题，并自动获取该密钥，但显然不是。谢谢，伙计

  <li key={0} className={this.state.activeIndex == 0 ? 'active' : null} onClick={() => this.ChangeColor(0)} >Home</li>
  <li key={1} className={this.state.activeIndex == 1 ? 'active' : null} onClick={() => this.ChangeColor(1)} >Features</li>
  <li key={2} className={this.state.activeIndex == 2 ? 'active' : null} onClick={() => this.ChangeColor(2)}  >How It Works</li>