jcleryを使ってonclick関数の後にicon色を塗りつぶす方法

Question

これは私のコードです。アドバイスをして、onclick関数の後にアイコンの色を変更したいと思います。

<div class="timeline-footer"> 
    <a 
    id="changeicon" 
    onClick={(event) => this.handleCount(post.id, event)} 
    class="m-r-25" 
    ><i class="fa fa-heart-o"></i> {post.rating} Like</a> 
</div> 

これは私の評価カウント機能である

handleCount(id, event) { 
    event.classList.toggle("icon-heart"); 

    fetch(this.state.url + '/rating/' + id, { 
    method: 'POST', 
    header: { 
     'Accept': 'applicatoin/json', 
     'Content-Type': 'application/json' 
    } 
    }) 
    .then((response) => { 
    window.location.reload(); 
    }) 
} 

Answer 1

はあなたが各クリック後の色を変更しますか？ あなたはそれがより「反応ウェイ」を変更する状態を経jqueryのを使用せずに行うことができます。

changeColor = (color) => this.setState({iconColor: color}); 

getIconStyle =() => ({ 
    color: this.state.iconColor 
}); 

handleCount = (id, event) => { 
    event.classList.toggle("icon-heart"); 

    this.changeColor("red"); // or anyway you want 

    fetch(this.state.url + '/rating/' + id, { 
     method: 'POST', 
     header: { 
      'Accept': 'applicatoin/json', 
      'Content-Type': 'application/json' 
     } 
    }) 
    .then((response) => { 
     window.location.reload(); 
    }) 
} 

内部レンダリング：代わりにスタイルの

<div className="timeline-footer"> 
    <a 
     id="changeicon" 
     onClick={(event) => this.handleCount(post.id, event)} 
     style={this.getIconStyle()} 
     className="m-r-25" 
    > 
      <i className="fa fa-heart-o"></i> {post.rating} Like 
    </a> 
</div> 

または変更するクラスを、それはあなたのケース