javascript - 如何在React JS中使用jquery在onclick函数后填充图标颜色

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

您想在每次点击后更改颜色吗？您可以通过状态更改来更“ react 方式”地完成此操作，而无需使用 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>

或者如果适合您的情况，可以更改类而不是样式