Question

我有几个显示各种细节的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类正在重复，当有多个项目时，每次点击项目时都会旋转。因为每个项目都有相同的css类。如何区分我点击其他项目的项目？

Answer 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”）。

Answer 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) =>
  ...
)

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

2 个答案: