在React中的audio.play()之后，audio.pause()不起作用

class AudioPlayer extends React.Component {
  constructor(props) {
    super(props);
    this.audioRef = React.createRef();
  }

  componentDidMount() {
    this.audioRef.current.addEventListener('ended', this.handleAudioEnded);
  }

  handleAudioEnded = () => {
    // 处理音频播放结束的逻辑
  }

  handlePlay = () => {
    this.audioRef.current.play();
  }

  handlePause = () => {
    this.audioRef.current.pause();
  }

  render() {
    return (
      <div>
        <audio ref={this.audioRef} src="audio.mp3" />
        <button onClick={this.handlePlay}>Play</button>
        <button onClick={this.handlePause}>Pause</button>
      </div>
    );
  }
}

class AudioPlayer extends React.Component {
  constructor(props) {
    super(props);
    this.audioRef = React.createRef();
    this.state = {
      isPlaying: false
    };
  }

  handlePlay = () => {
    this.audioRef.current.play();
    this.setState({ isPlaying: true });
  }

  handlePause = () => {
    this.audioRef.current.pause();
    this.setState({ isPlaying: false });
  }

  render() {
    const { isPlaying } = this.state;

    return (
      <div>
        <audio ref={this.audioRef} src="audio.mp3" />
        <button onClick={this.handlePlay} disabled={isPlaying}>Play</button>
        <button onClick={this.handlePause} disabled={!isPlaying}>Pause</button>
      </div>
    );
  }
}

class AudioPlayer extends React.Component {
  constructor(props) {
    super(props);
    this.audioRef = React.createRef();
    this.state = {
      isPlaying: false,
      isLoaded: false
    };
  }

  componentDidMount() {
    this.audioRef.current.addEventListener('canplaythrough', this.handleAudioLoaded);
  }

  handleAudioLoaded = () => {
    this.setState({ isLoaded: true });
  }

  handlePlay = () => {
    if (this.state.isLoaded) {
      this.audioRef.current.play();
      this.setState({ isPlaying: true });
    }
  }

  handlePause = () => {
    if (this.state.isLoaded) {
      this.audioRef.current.pause();
      this.setState({ isPlaying: false });
    }
  }

  render() {
    const { isPlaying, isLoaded } = this.state;

    return (
      <div>
        <audio ref={this.audioRef} src="audio.mp3" />
        <button onClick={this.handlePlay} disabled={!isLoaded || isPlaying}>Play</button>
        <button onClick={this.handlePause} disabled={!isLoaded || !isPlaying}>Pause</button>
      </div>
    );
  }
}