如何在点击时更改按钮的状态并在 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

您可以使用箭头功能访问以前的状态setStatesetClassText(prev&nbsp;=>&nbsp;prev&nbsp;===&nbsp;"A"&nbsp;?&nbsp;"B"&nbsp;:&nbsp;"A");