Javascript 在状态更改时响应更改类名

我有一个这样的状态，我正在设置

active

和

class

这样的标志：

constructor(props) {
  super(props);
  this.state = {'active': false, 'class': 'album'};
}

handleClick(id) {
  if(this.state.active){
    this.setState({'active': false,'class': 'album'})
  }else{
    this.setState({'active': true,'class': 'active'})
  }
}

我有一个项目列表，它的类名来自州：

<div className={this.state.class} key={data.id} onClick={this.handleClick.bind(this.data.id}>
  <p>{data.name}</p>
</div>

{data.name}

---

这里我如何更改特定div的类名？

下面是一个功能完整的示例，我相信您正在尝试（使用一个功能片段）执行此操作

解释 根据您的问题，您似乎正在为所有元素修改

状态中的1个属性。这就是为什么当你点击其中一个时，它们都被改变了

特别要注意的是，状态跟踪某个元素处于活动状态的索引。单击
MyClickable
时，它告诉
Container
它的索引，
Container
更新
状态
，然后相应的
MyClickable
的
isActive属性

例子

类容器扩展React.Component{
状态={
activeIndex:null
}
handleClick=（index）=>this.setState（{activeIndex:index}）
render（）{
返回
}
}
类MyClickable.Component{
handleClick=（）=>this.props.onClick（this.props.index）
render（）{
返回
{this.props.name}
}
}
ReactDOM.render（，document.getElementById（'app'））
按钮{
显示：块；
边缘底部：1米；
}
.album>span:after{
内容:"(专辑)"；
}
.主动{
字体大小：粗体；
}
.活动>跨度：之后{
内容：“主动”；
}

您必须发布更多的代码。如果
位于您在第一个代码段中描述的组件的呈现方法中，那么是的，应该可以工作。是的，它位于呈现方法中。。但是列表中的所有div都在更改。。我想更改我所单击的div的类。组件构造上分配的onClick和容器中分配的onClick是否相同？为什么需要4个onclick方法来设置属性和状态，confused@maxwell这可能令人困惑
onClick
是
MyClickable
的
prop
。它是一个传递给
MyClickable
的函数。每个
MyClickable
都被传递到
Container
中定义的
handleClick
函数。然后，
MyClickable
负责在适当的时间使用适当的参数调用此函数。这是根据子组件中发生的情况更新父组件状态的典型方式。在本例中，每个
MyClickable
都将调用其
onClick
函数及其索引，有效地告诉
容器
哪个处于活动状态；在我看来，React会找到一种在组件之间传输状态访问的方法，而不会将属性作为中间步骤，但他们是专家