如何在React中設置視頻端組件的狀態？

Question

在我的組件我有一個componentDidUpdate功能，我播放視頻並在該視頻中，我設定的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 });
      }
    }
  }

我現在的問題是onstate函數中未定義this.state，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/