Question

在我的组件中，我有componentDidUpdate功能，我在其中播放视频，在该视频中，我按照HERE

设置video.onended事件

目前我的代码如下：

  componentDidUpdate: function() {
    if(this.state.showVideo){
      this.refs.homeVideo.play();
      // Triggering event on video end
      let homeVideo = document.getElementById("homeVideo");
      homeVideo.onended = function(){
        console.log(this.state);
        this.setState({ showVideo: !this.state.showVideo });
      }
    }
  }

我现在的问题是on.deate在onended函数中是未定义的，因此是setState，这阻止我更新react中的组件状态，以便我可以在视频播放器结束时关闭它。

处理此问题的适当反应方式是什么？

Answer 1

因为每个新函数都定义了自己的this值。

您可以执行以下操作：

var self = this;
homeVideo.onended = function(){
  console.log(self.state);
  self.setState({ showVideo: !self.state.showVideo });
}

或者更好的是，如果您使用的是ES6，请使用箭头功能：

homeVideo.onended = () => {
   console.log(this.state);
   this.setState({ showVideo: !this.state.showVideo });
}

箭头函数在词法上绑定this值。

Answer 2

您不需要document.getElementById。

尝试将代码更新为：

componentDidUpdate: function() {
    var self = this;
    if(this.state.showVideo){
      let video = this.refs.homeVideo;
      video.play();
      video.onended = function(){
        console.log(self.state);
        self.setState({ showVideo: !self.state.showVideo });
      }
    }
  }

JSfiddle示例https://jsfiddle.net/ntfjncuf/

如何设置视频端组件的状态？

2 个答案: