Question

我制作了一个音频播放器，只需一个按钮即可播放和暂停。如果playing为false，则应执行播放操作，如果playing为真，则会暂停。

我不确定是不是因为在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/>
      )
  }

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

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

Answer 1

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')
);

您可以使用三元onclick执行此操作，您可以决定要调用哪个函数。可能是拼写错误，但您需要this.setState({key:value});而不是this.setState({key = value});

https://jsfiddle.net/69z2wepo/183621/

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

1 个答案: