Wie kann ich den Status einer Komponente am Videoende einstellen?

Question

In meiner Komponente Ich habe eine componentDidUpdate Funktion, wo ich ein Video abspielen und auf diesem Video habe ich die video.onended Ereignis als HERE bemerkt sieht

Derzeit mein Code wie folgt aus:

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

jetzt Mein Problem ist, that.state ist in der onended-Funktion undefined und so ist setState, was mich daran hindert, den Zustand der Komponente in react zu aktualisieren, so dass ich den Videoplayer schließen kann, wenn er beendet ist.

Was ist der richtige Weg, um dies zu handhaben?

Answer 1

Sie benötigen document.getElementById nicht.

Versuchen Sie den Code dazu zu aktualisieren:

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 Beispiel https://jsfiddle.net/ntfjncuf/

Answer 2

Es ist weil jede neue Funktion ihren eigenen this Wert definiert.

Sie können wie etwas tun:

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

Oder noch besser, mit den Pfeil Funktionen wenn Ihr mit ES6:

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

Pfeil Funktionen lexikalisch bindet den this Wert.