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

Question

我有一个按钮，我将其定义为：

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

我想更改 css 样式 class 和按钮的文本 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");

How to change state of button on click and revert back to the original state when clicked again in React?