这是我的代码。请告诉我,我想在 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();
})
}
最佳答案
您想在每次点击后更改颜色吗? 您可以通过状态更改来更“ 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>
或者如果适合您的情况,可以更改类而不是样式
关于javascript - 如何在React JS中使用jquery在onclick函数后填充图标颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47671894/