我如何在React JS中使用jQuery在onclick函数后填充图标颜色

Question

Here is my code.Let me advice ,I want to change icon color after onclick function .

<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>

This is my rating count function

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

Do you want to change color after each click? You can do it more 'react-way' without using jquery through state changing:

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();
    })
}

Inside render:

<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>

Or change class instead of style if it suits your case