React组件中如何实现按钮点击时的颜色与图标来回切换

核心问题在于你没有用状态变量记录当前的切换状态，每次点击只单向修改样式/图标，没有做「反转」逻辑。下面是不同技术栈的具体实现方案：

原生JavaScript实现 #

用布尔变量记录状态，点击时反转状态，通过类名切换样式、直接修改图标内容：

<button id="toggleBtn">
  <span class="btn-icon">🔔</span>
</button>

<style>
#toggleBtn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-active {
  background-color: #e74c3c;
  color: #fff;
}
</style>

<script>
const toggleBtn = document.getElementById('toggleBtn');
const btnIcon = toggleBtn.querySelector('.btn-icon');
let isBtnActive = false;

toggleBtn.addEventListener('click', () => {
  // 反转状态
  isBtnActive = !isBtnActive;
  // 切换按钮样式类
  toggleBtn.classList.toggle('btn-active');
  // 切换图标
  btnIcon.textContent = isBtnActive ? '🔕' : '🔔';
});
</script>

Vue 3实现（Vue 2逻辑类似） #

利用响应式状态变量，通过指令动态绑定类名和图标：

<template>
  <button 
    @click="isActive = !isActive"
    :class="{ 'active-btn': isActive }"
    class="base-btn"
  >
    <span>{{ isActive ? '🔕' : '🔔' }}</span>
  </button>
</template>

<script setup>
import { ref } from 'vue';
// 初始化状态为未激活
const isActive = ref(false);
</script>

<style scoped>
.base-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.active-btn {
  background-color: #e74c3c;
  color: #fff;
}
</style>

React实现 #

用useState管理状态，根据状态值渲染对应的样式和图标：

import { useState } from 'react';

export default function ToggleButton() {
  const [isActive, setIsActive] = useState(false);

  const handleToggle = () => {
    // 基于当前状态反转
    setIsActive(prevState => !prevState);
  };

  return (
    <button
      onClick={handleToggle}
      className={`base-btn ${isActive ? 'active-btn' : ''}`}
    >
      <span>{isActive ? '🔕' : '🔔'}</span>
    </button>
  );
}

// 全局样式
const styles = document.createElement('style');
styles.textContent = `
.base-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.active-btn {
  background-color: #e74c3c;
  color: #fff;
}
`;
document.head.appendChild(styles);

通用注意事项 #

• 必须用状态变量（布尔值最适合这种二元切换）记录当前状态，而不是每次点击直接设置为固定值
• 切换样式时优先用类名切换，比直接修改style属性更易维护
• 图标切换可以通过修改文本、切换图标类（如Font Awesome）或替换图片路径实现，核心逻辑都是根据状态值选择对应内容

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