Javascript 切换播放/暂停以响应音频

我做了一个音频播放器，有一个按钮可以播放和暂停。如果

播放

为假，则应执行播放操作；如果

播放

为真，则应暂停播放

我不确定这是否是因为在React中思考对我来说仍然不是100%自然的，但我不知道如何做到这一点

谁能给我指出正确的方向吗

请看下面我的代码

var Player = React.createClass({

   getInitialState: function(){
       return{
           songs:[],
           playing: false
       }
   },

   audio: new Audio,

   playSong: function(){
       this.setState({playing = true});
       this.audio.src = this.state.songs[this.props.song];
       this.audio.play();
   },

   pauseSong: function() {
       this.setState({playing = false});
       this.audio.pause();
   },

  render: function(){
      return(
        <p onClick={...}>Play/Pause<p/>
      )
  }

var Player=React.createClass({
getInitialState:函数（）{
返回{
歌曲：[]，
播放：错误
}
},
音频：新音频，
playSong:function（）{
this.setState（{playing=true}）；
this.audio.src=this.state.songs[this.props.song]；
这个.audio.play（）；
},
pauseSong:function（）{
this.setState（{playing=false}）；
this.audio.pause（）；
},
render:function（）{
返回(
播放/暂停

)
}

我想我可以创建另一个函数来切换播放和暂停，如下所示。这是最好的方法吗

togglePlayPause:function() {
    if(this.state.playing === false) {
        this.playSong();
    }else {
        this.pauseSong();
    }
},
render: function(){
      return(
        <p onClick={this.togglePlayPause}>Play/Pause<p/>
      )
  }

切换播放暂停：函数（）{
if（this.state.playing==false）{
这个。playSong（）；
}否则{
这个.pauseSong（）；
}
},
render:function（）{
返回(
Play/Pause

)
}

var Player=React.createClass({
getInitialState:函数（）{
返回{
歌曲：[]，
播放：错误
}
},
音频：新音频，
playSong:function（）{
控制台日志（“播放”）
this.setState（{playing:true}）；
this.audio.src=this.state.songs[this.props.song]；
这个.audio.play（）；
},
pauseSong:function（）{
控制台日志（“暂停”）；
this.setState（{playing:false}）；
this.audio.pause（）；
},
render:function（）{
返回(
播放/暂停
)
}
});
ReactDOM.render(
,
document.getElementById（'容器'）
);

您可以通过三元onclick来实现这一点，您可以决定要调用哪个函数。 可能是打字错误，但您需要执行

this.setState（{key:value}）；

而不是

this.setState（{key=value}）；

---

jsiddle链接导致默认的“Hello World”示例：|太棒了，谢谢！如果«Play/Pause»按钮在点击后以某种方式改变，该示例将变得更加美好。

var Player = React.createClass({

  getInitialState: function() {
    return {
      songs: [],
      playing: false
    }
  },

  audio: new Audio,

  playSong: function() {
    console.log("play")
    this.setState({ playing: true });
    this.audio.src = this.state.songs[this.props.song];
    this.audio.play(); 
  },

  pauseSong: function() {
    console.log("pause");
    this.setState({ playing: false });
    this.audio.pause();
  },

  render: function() {
    return(
      <p onClick={this.state.playing ? this.pauseSong : this.playSong}>Play/Pause</p>
    )
  }

});

ReactDOM.render(
  <Player/>,
  document.getElementById('container')
);