同じdivで複数回クリックしたときに変更を元に戻す

Question

データベースから送信されたデータに応じて任意の回数レンダリングするようにdivをマップしました。 divをクリックすると、divの背景色を設定しています。もう一度divをクリックすると、どのように変更を元に戻すことができますか？私は成功したのdivの背景を変更しています上記のコードを使用して

私のコード

handleClick(id) { 

let el = document.getElementById(id); 

     if (el) { 

      el.style.backgroundColor = "#0b97c4"; 
      el.style.color = "#FFFFFF"; 

      this.setState({ 

       voteCount: this.state.voteCount + 1 

      }) 
     } 

     this.props.submitvote(vote_object) 

} 

render() { 

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

     return (

      <div className="txt_vote_bar_div" id={this.props.contents.post_poll_content_id}> 
       <p className="txt_vote_choice" id={this.props.contents.post_poll_content_id} 
       onClick={() => {this.handleClick(this.props.contents.post_poll_content_id);}}> 
        {contents.content} 
       </p> 
       <p className="txt_tot_votes"> {this.props.contents.votes_percentage}% 
       ({this.state.voteCount} Votes) 
       </p> 
      </div> 
     ); 
    }; 

。私は再び同じdiv要素を選択した場合、私は、背景色を削除するにはどうすればよい（背景色を削除するか、別の色に変更）

Answer 1

私はtxt_vote_choice「古い」CSS名になるだろう、とtxt_vote_clickedは、変更したい新しいclassNameです。 onClickによって、これらの2つのクラスの間でclassNameを切り替えると、そのトリックが行われます。その後

handleClick(id) { 
 
    let el = document.getElementById(id); 
 
    if (el) { 
 
    if el.class == "txt_vote_choice" ? "txt_vote_clicked": "txt_vote_choice"; 
 

 
    this.setState({ 
 
     voteCount: this.state.voteCount + 1 
 
    }) 
 
    } 
 

 
    this.props.submitvote(vote_object) 
 
} 
 

 
render() { 
 

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

 
    return (
 
    <div className="txt_vote_bar_div" 
 
      id={this.props.contents.post_poll_content_id}> 
 
     <p className={voted_css} 
 
      id={this.props.contents.post_poll_content_id} 
 
      onClick={() => {this.handleClick(this.props.contents.post_poll_content_id);}}> 
 
     {contents.content} 
 
     </p> 
 
     <p className="txt_tot_votes"> 
 
     {this.props.contents.votes_percentage}%({this.state.voteCount} Votes) 
 
     </p> 
 
    </div> 
 
); 
 
};

それだけ「オン・オフ」機能であれば、あなたはこのようなあなたのdivに、既に「アクティブ」なスタイルを確認することができます応じて

Answer 2

をCSSを更新します。私は、すべてのdivはのbackgroundColorを取得した状態を使用してクラス名を切り替える場合if (el.style.backgroundColor == "#0b97c4";) //if the style is already there:は、あなたがあなたのdiv右の色

if (el) 
{ 
    if (el.style.backgroundColor == "#0b97c4";) //if the style is already there: 
    { 
     el.style.backgroundColor = "#FF0000"; 
     el.style.color = "#000000"; //put theese 2 colors to the "unactivated" ones 

     //other code when you unselect goes here like this.state.voteCount - 1 
    } 
    else 
    { 
     el.style.backgroundColor = "#0b97c4"; 
     el.style.color = "#FFFFFF"; 

     this.setState({ 
      voteCount: this.state.voteCount + 1 
     }) 
    } 
}