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

Question

我有一个按钮，我定义为：<button className={class} onClick={() => changeClassProperty()}>        {classText}</button>我想更改 css 样式类和按钮A onclick 的文本。所以目前我正在使用 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");