在我的组件我有一个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 });
}
}
}
我现在的问题是on.end函数中未定义this.state,setState也未定义。这使我无法在react中更新组件的状态,以便我可以在视频播放器结束时关闭它。
处理此问题的适当反应方式是什么?
您不需要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/
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句