Javascript 在具有相同方法名称的多个项中，仅将更改应用于单击的项

我有几个显示各种细节的div。我打算从后端获取详细信息，并将它们绑定到我的html部分。到目前为止，我已经把细节硬编码了。这是我的html部分

<div className="trait_box polaroid" onClick={this.trait_select}>
  <div className="main_trait_card" style={{transform: this.state.rotated ? 'rotateY(180deg)' : 'none' }}>
    <div className="front_card_rotate">
      <div className="trait_description_div">
        <span className="trait_description">Honesty</span>
      </div>
      <div className="trait_img_div">
        <img src={Honesty} className="trait_img"/>
      </div>
      <div className="block__body">
          <img src={Add} className="trait_add"/>
            <p className="trait_text">Honesty refers to a facet of moral character and connotes positive and virtuous attributes such as integrity, truthfulness,straightforwardness etc.. </p>
      </div>
    </div>
      <div className="back_card_rotate front_card_rotate">
          <span>Wolverine</span>
      </div>
  </div>
</div>

---

我的问题是，同样的css类在重复，当有1个以上的项目时，每次我点击一个项目时都会旋转。因为每个项目都有相同的css类。如何区分单击的项目与其他项目？

将布尔值替换为数组，并使用

e.target.name

标识单击的特征：

constructor（）{
超级（）；
this.state={rotated_traits:[]}；
this.trait\u select=this.trait\u select.bind（this）；
}
特征选择=（e）=>{
const rotated_traits=this.state.rotated_traits
旋转特征[e.target.name]=！this.state.rotated特征[e.target.name]
this.setState（{rotated_traits}）；
}

及

..

如果您没有

trait.id

，可以使用

索引

：

traits.map((trait, index) =>
  ...
)

---

我认为每个特征框都应该是一个组件，并管理自己的状态：

 class TraitBox extends Component {
   constructor(props) {
     super(props);
     this.state = { rotate: false }        
   }
   trait_select = (e) => {...}
   render() {
      return ( <div className="trait_box..." ></div> )
   }
 }

 // and then you can import/use that component in a container
 class ContainerApp extends Component {
   render() {
     return (
       <TraitBox />
       <TraitBox />
       <TraitBox />
     )
   }
 }

如果trait_select是箭头函数（AF应自动绑定“this”）

 class TraitBox extends Component {
   constructor(props) {
     super(props);
     this.state = { rotate: false }        
   }
   trait_select = (e) => {...}
   render() {
      return ( <div className="trait_box..." ></div> )
   }
 }

 // and then you can import/use that component in a container
 class ContainerApp extends Component {
   render() {
     return (
       <TraitBox />
       <TraitBox />
       <TraitBox />
     )
   }
 }

 this.trait_select = this.trait_select.bind(this);