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

每次点击后你想改变颜色吗？你可以做得更多＆＃39; react-way＆＃39;不通过状态改变使用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>

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

如何使用反应js

1 个答案: