React中如何实现按钮点击切换状态并再次点击恢复原状态？

这事儿很简单，你只需要在切换逻辑里加个状态判断就行，我给你两种常见的实现方式：

方法1：基于现有两个状态直接判断 #

你现在已经用了classColor和classText两个状态，只需要修改changeClassProperty函数，让它根据当前状态反向切换：

import { useState } from 'react';
// 假设你的styles是CSS Modules或者类似的样式对象
import styles from './YourComponent.module.css';

function YourComponent() {
  const [classColor, setClassColor] = useState(styles.classAButton);
  const [classText, setClassText] = useState("A");

  function changeClassProperty() {
    // 检查当前是不是A状态，是的话切到B，反之切回A
    if (classColor === styles.classAButton) {
      setClassColor(styles.classBButton);
      setClassText("B");
    } else {
      setClassColor(styles.classAButton);
      setClassText("A");
    }
  }

  return (
    <button className={classColor} onClick={changeClassProperty}>
      {classText}
    </button>
  );
}

这种方式直接复用你现有的状态，不需要改动太多代码，适合快速调整。

方法2：用单一状态管理切换（更推荐） #

维护两个状态容易出现同步问题，其实可以用一个布尔值或者字符串来标记当前是A还是B状态，然后动态推导样式和文本，逻辑更简洁：

import { useState } from 'react';
import styles from './YourComponent.module.css';

function YourComponent() {
  // 用一个布尔值标记当前是否为A状态，初始为true（显示A）
  const [isStateA, setIsStateA] = useState(true);

  // 根据状态动态生成当前需要的样式和文本
  const currentButtonClass = isStateA ? styles.classAButton : styles.classBButton;
  const currentButtonText = isStateA ? "A" : "B";

  // 切换函数只需要翻转布尔值就行
  function changeClassProperty() {
    setIsStateA(!isStateA);
  }

  return (
    <button className={currentButtonClass} onClick={changeClassProperty}>
      {currentButtonText}
    </button>
  );
}

这种方式只需要维护一个状态，代码更清爽，也不容易出现样式和文本不同步的问题，我个人更推荐这种写法。

注意点 #

如果你的styles是CSS Modules生成的对象，那么类名是唯一的字符串，直接用===比较是完全没问题的；如果是全局类名，记得用字符串比较（比如classColor === 'classAButton'）。

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