如何在单击时更改按钮的状态并在React中再次单击时恢复为原始状态？

Question

我有一个定义为的按钮：

<button className={class} onClick={() => changeClassProperty()}>
        {classText}
</button>

我想更改css样式类和onclick上的按钮 A 的文本。因此，当前我正在使用UseState挂钩执行此操作，如下所示：

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

changeClassColor（）处理程序负责将CSS颜色样式和按钮的文本更改为：

function changeClassProperty() {
    setClassColor(styles.classBButton);
    setClassText("B");
  }

因此，单击按钮 A 会将其颜色和文本更改为我的按钮 B 。现在，我希望每当单击该按钮时，它就会在状态A和状态B之间切换。我该如何实现？

Answer 1

您可以使用setState中的箭头功能访问以前的状态

setClassText(prev => prev === "A" ? "B" : "A");