將更改僅應用於具有相同方法名稱的多個項目中的已單擊的項目

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的onClick這樣

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類。我如何區分我點擊其他項目的項目？

Answer 1

與陣列替換布爾和使用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) => 
    ... 
) 

Answer 2

我認爲每個trait_box應該是一個co mponent和管理自己的狀態：如果trait_select是一個箭頭

this.trait_select = this.trait_select.bind(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 /> 
    ) 
    } 
} 

現在，每個TraitBox可以管理自己的狀態和風格

順便說一句，你不需要這個功能（AF應該自動綁定「this」）。