React中触发onClick点击事件后如何修改图标颜色（附示例代码）

你已经通过islike状态维护了当前点赞状态，直接将该状态和图标颜色绑定即可，有两种常用实现方式：

方法1：行内样式绑定（最简单快速） #

直接给FavoriteIcon增加style属性，根据islike的值动态设置颜色，修改对应代码如下：

<FavoriteIcon   
  className="icon" 
  onClick={handler}
  style={{ color: islike ? 'red' : '#666' }} // 颜色可以替换成你需要的自定义色值
/>

方法2：动态类名绑定（适合多样式调整） #

如果需要同时调整点赞后的图标大小、动画等多个样式，建议用动态类名实现：

1. 先在对应CSS文件中新增两个样式类：

/* 未点赞状态样式 */
.icon-like-normal {
  color: #666;
  transition: all 0.2s ease; /* 增加过渡动画交互更丝滑 */
}
/* 已点赞状态样式 */
.icon-like-active {
  color: #f43f5e; /* 点赞后的主题红色，可自定义 */
  transform: scale(1.1);
  transition: all 0.2s ease;
}

2. 修改FavoriteIcon的className属性，动态拼接类名：

<FavoriteIcon   
  className={`icon ${islike ? 'icon-like-active' : 'icon-like-normal'}`} 
  onClick={handler}
/>

优化提示 #

当前你islike的初始值固定为false，如果后端返回的post数据中包含当前用户是否点赞的标记，建议将初始值改为useState(post.isLiked)，避免页面刷新后点赞状态和实际存储状态不一致的问题。

内容的提问来源于stack exchange，提问作者Ali Mohamadi