onClickEvent 不會更改類名

Question

我正在嘗試使用 react + mobx 制作一個切換按鈕，切換按鈕 function 更改了切換標志，但類名沒有改變。 我應該怎么做才能讓它發揮作用？

按鈕：

<button
  className={store.playerStatus === 'playing' ? 'play' : 'pause'}
  onClick={() => {
    store.togglePlayButton()
  }}
/>

商店.ts：

@observable
playerStatus?: 'playing' | 'paused';

@action
setPlayerStatus = (value: 'playing' | 'paused') => {
  this.playerStatus = value;
};

@action
togglePlayButton = () => {
  if (this.playerStatus === 'paused') {
    
    this.player?.current?.play();
  } else {
    this.player?.current?.pause();
  }
};

Answer 1

Please use this one

<button className={store.playerStatus === 'playing' ? 'play' : 'pause'}
 onClick={() => {
  store.togglePlayButton(store.playerStatus)
 }}
/>

商店.ts：

@action
togglePlayButton = (status) => {
 if (status === 'paused') {  
  this.player?.current?.play();
 } else {
  this.player?.current?.pause();
 }
};