根据状态变化将样式应用于仅一个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

回答

相关问题