ビデオエンドのコンポーネントの状態を反応させるにはどうしたらいいですか？私のコンポーネントで

Question

は私がビデオを再生し、その映像に私が述べたようにvideo.onendedイベントを設定componentDidUpdate機能を持っているHERE

は現在、私のコードは次のようになります。

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はonend関数では定義されていないので、setStateは反応中のコンポーネントの状態を更新しないようにして、終了時にビデオプレーヤーを閉じることができます。

これを処理する適切な対応方法は何ですか？

Answer 1

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/

Answer 2

それはすべての新しい関数がそれ自身の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値をバインドします。