如何实现按钮点击与未点击状态下的背景颜色切换？

问题原因 #

1. 按钮的className未关联playing状态，没有触发样式切换的标识类
2. 播放逻辑中，未在音频开始播放时将playing设为true，导致状态始终未发生变化

修复步骤 #

1. 给按钮添加状态关联的类名

修改按钮的className，根据playing状态添加切换类：

<button
  id={`instruction-button`}
  data-id="instruction-button"
  data-testid="instruction-button"
  className={`instruction-button ${ 
    transparent ? 'transparent' : ''
  } ${playing ? 'playing-btn' : ''}`} // 新增该行，绑定playing状态
  aria-label={'Activity instructions'}
  onClick={handleClick}
  label="Activity instructions"
>
  <i className={`r180 instructions ${playing ? 'playing' : ''}`} />
</button>

2. 添加对应状态的样式

在instructionsButton的样式中，新增playing-btn类的背景色样式，同时给背景色添加过渡动画：

instructionsButton: {
  position: 'absolute',
  left: '8px',
  top: '8px',
  zIndex: '10',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  transition: 'transform 0.3s ease',
  '& .instruction-button': {
    position: 'relative',
    display: 'inline-block',
    width: '24px',
    height: '24px',
    outline: 'none',
    textAlign: 'center',
    cursor: 'pointer',
    transition: 'transform 0.3s ease, background 0.3s ease', // 新增background过渡
    background: 'rgba(255, 255, 255, 0.7)',
    boxShadow: '0 0 0 4px #fff',
    backgroundClip: 'padding-box',
    borderRadius: '12px',
    // 新增playing状态的按钮样式
    '&.playing-btn': {
      background: 'rgba(255, 0, 0, 0.7)', // 自定义播放状态的背景色
    },
    '& i': {
      color: theme.colors.softBlack,
      background: 'rgba(255, 255, 255, 0.7)',
      borderRadius: '12px',
      fontSize: '24px'
    },
    '& i.playing': {
      color: 'red'
    }
  },
}

3. 修正播放逻辑中的状态设置

在handleClick的播放分支中，先将playing设为true，标记正在播放，音频结束后再设回false：

const handleClick = async e => {
  if (e) {
    e.stopPropagation();
  }

  if (disabled === true) {
    if (e) {
      e.preventDefault();
    }
    return false;
  }

  if (playing) {
    AudioPlayer2.stop(audioReference);
    setPlaying(false);
    if (typeof onSoundEnd === 'function') {
      onSoundEnd();
    }
    reduxStore.dispatch(uiSlice.actions.setCaptionSrc(''));
  } else {
    AudioPlayer2.stopAll();
    if (typeof onSoundStart === 'function') {
      onSoundStart();
    }
    if (audioReference === '') {
      if (typeof onSoundEnd === 'function') {
        onSoundEnd();
      }
      return;
    }
    reduxStore.dispatch(
      uiSlice.actions.pauseAnimations(BTN_CLICK.INSTRUCTION)
    );

    setPlaying(true); // 播放前设置为true，触发样式切换
    await AudioPlayer2.playSync(audioReference);
    setPlaying(false); // 播放结束后恢复状态

    if (
      reduxStore.getState().ui.pauseBtnClick === BTN_CLICK.INSTRUCTION
    ) {
      reduxStore.dispatch(uiSlice.actions.unpauseAnimations());
    }

    if (typeof onSoundEnd === 'function') {
      onSoundEnd();
    }
  }
};

效果说明 #

修改完成后，点击按钮时：

• 音频开始播放，playing变为true，按钮切换为playing-btn样式（自定义背景色）
• 音频播放结束或手动停止时，playing变为false，按钮恢复原有背景色

内容的提问来源于stack exchange，提问作者sneha