2017-01-25 9 views
0

私のアプリケーションでreact-reduxを使用しています。私はプレーヤーを持っており、私はビデオリスニングのために、私はビデオタイムラインでスライダーをスライドさせるとトリガーされるべきアクションライターを持っています。そのためにhttps://github.com/danielcebrian/rangeslider-videojsに与えられたプラグインがあります。このイベント関数から自分のアクションに値を渡したいと思います。ここに私のコードアクションがcomponentDidMount内で機能しない

newMarkerTimeは、私は、スライダーをスライドすると、このようなエラーに与える自分の行動

class PlayerLogic extends Component { 
    constructor() { 
     super(); 
     this.state = { 
      player: {} 
     }; 
    } 

    componentDidMount() { 
     var self = this; 
     var options ={hidden:false}; 
     var player = videojs(this.refs.video, this.props.options).ready(function() { 
      self.player = this; 
      self.player.on('play', self.handlePlay); 
     }); 
     player.rangeslider(options); 
     player.on("sliderchange",function() { 
      values = player.getValueSlider(); 
      this.props.newMarkerTime(values); 
     }); 

です。

enter image description here

答えて

2

あなたはここで脂肪の矢印を使用する必要がある、またはあなたが働いて

player.on("sliderchange",function() { 
    values = player.getValueSlider(); 
    // this refers to player 
    this.props.newMarkerTime(values); 
    // self refers to your component 
    self.props.newMarkerTime(values); 
}); 

// use a fat arrow instead 
player.on("sliderchange",() => { 
    values = player.getValueSlider(); 
    // this refers to your react component 
    this.props.newMarkerTime(values); 
}); 
+0

上で宣言selfを使用しています。ここで矢印機能を使うことの背後にある論理は何ですか? – ApurvG

+0

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions –

関連する問題