仅将更改应用于具有相同方法名称的多个项目中的单击项目答案

【问题标题】：Apply changes only to the clicked item among several items with same method name仅将更改应用于具有相同方法名称的多个项目中的单击项目
【发布时间】：2017-03-21 13:55:28
【问题描述】：

我有几个显示各种细节的 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>

这是根据后端有多少项目重复的 div。

我正在像这样在点击时旋转这些 div

constructor() {
        super();
          this.state = {rotated: false};
          this.trait_select = this.trait_select.bind(this);
}
trait_select = (e) => {
          this.setState({rotated: !this.state.rotated});
}

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

【问题讨论】：

标签： javascript html css reactjs events

【解决方案1】：

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

 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 />
     )
   }
 }

现在，每个 TraitBox 都可以管理自己的状态和样式

顺便说一句，你不需要这个：

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

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

【讨论】：

【解决方案2】：

用数组替换布尔值并使用e.target.name 来识别被点击的特征：

constructor() {
  super();
  this.state = { rotated_traits: [] };
  this.trait_select = this.trait_select.bind(this);
}

trait_select = (e) => {
  const rotated_traits = this.state.rotated_traits

  rotated_traits[e.target.name] = !this.state.rotated_traits[e.target.name]

  this.setState({ rotated_traits });
}

和

<div className="trait_box polaroid" name={trait.id} onClick={this.trait_select}>
  <div className="main_trait_card" style={{transform: this.state.rotated_traits[trait.id] ? 'rotateY(180deg)' : 'none' }}>
    ..
  </div>
</div>

如果您没有trait.id，可以使用index：

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

【讨论】：