根據狀態變化將樣式應用於僅一個div

我從我後端獲得的數據中渲染4個div。我正根據狀態更改着色這些div。到目前爲止，我成功地做到了，但唯一的問題是所有4個div都可以用這種方式着色。當我爲另一個div着色時，我想先去掉上一個div。我怎樣才能做到這一點？根據狀態變化將樣式應用於僅一個div

我的代碼

textVote() { 

     this.setState({ 

      vote_status: !this.state.vote_status 

     }) 

    } 

handleClick(id) { 

     let vote_object = { 
      voting_object: id, 
      post_id: this.props.postId 
     } 
     this.props.submitvote(vote_object) 
     this.textVote(); 

    } 


render() { 

     console.log("getVoteStatus", this.props.getVoteStatus) 

     let {contents, submitvote, postId} = this.props 

return (

     <div className="txt_vote_bar_div" style={{backgroundColor: this.state.vote_status ? '#0b97c4' : 'white'}}> 
      <p className="txt_vote_choice" style={{color: this.state.vote_status ? '#FFFFFF' : '#6a6a6a'}} 
       id={contents.post_poll_content_id} onClick={() => { 

        this.handleClick(contents.post_poll_content_id); 

        }}> {contents.content} </p> 
      <p className="txt_tot_votes" style={{color: this.state.vote_status ? '#FFFFFF' : '#6a6a6a'}}> 56% (Votes: {contents.votes}) </p> 
     </div> 
    ); 
    };

我怎樣才能使它所以我只顏色一組格的背景和去除背景顏色，當我選擇another.Thanks。

來源

2017-08-16 CraZyDroiD

什麼決定哪個div應該着色？我只能在這個例子中看到一個div（並且它不在render函數中） – jye265

@jye265在handleClick方法中，我正在改變一個state.based在那個狀態背景着色正在發生 – CraZyDroiD

你在映射/循環這個渲染函數任何方式？如果是，在哪一點？ –

據我所知，你試圖有多個div，當你點擊每個div它會改變顏色，同時其他div會改回它的默認顏色。我對嗎？

我的解決方案是這樣的。將每個組件指定爲一個數字。

handleClick = (number) =>{ 
    this.setState({ 
     vote_status: number 
    }) 
} 

render() { 
    {data.map((content,index) => { 
    <div 
     style={{backgroundColor: this.state.vote_status === index ? '#0b97c4' : 'white'}} 
     onClick={() => {this.handleClick(index)}}> 
    </div> 
    })} 
}

來源

2017-08-16 05:00:39

我只映射一個div。根據後端內容，同一個div重複4次。如果後端中的內容超過4個，它將會渲染超過4倍 – CraZyDroiD

您可以向我們展示用於呈現此組件的代碼嗎？一次只選擇一個div的邏輯（通過只在一個組件上設置vote_status爲true）將在父組件中完成 – jye265

@CraZyDroiD我已經編輯了我的答案，可以使用索引號 –

根據狀態變化將樣式應用於僅一個div

回答

相關問題