他の関数の中にある関数を呼び出す

Question

私は、その外からJsonの内部にある関数を呼び出そうとしています。私はボタン "onClick"メソッドの "次の"機能をトリガーしたい。ここに私のコードです。私はonClick = {this.next}で呼び出そうとしましたが、このメソッドでは呼び出されません。

export default class PlayerLogic extends Component{ 

    componentDidMount() { 
     var self = this; 
     var player = videojs(this.refs.video, this.props.options).ready(function() { 
      self.player = this; 
      self.player.on('play', self.handlePlay); 
     }); 

     player.markers({ 
      onMarkerReached: function() { 
       player.pause(); 
      }, 

      next : function() { 
       // go to the next marker from current timestamp 
       console.log("reached") 
       var currentTime = player.currentTime(); 
       for (var i = 0; i < markersList.length; i++) { 
        var markerTime = setting.markerTip.time(markersList[i]); 
        if (markerTime > currentTime) { 
         player.currentTime(markerTime); 
         break; 
        } 
       } 
      } 
     }); 

    } 

    render() { 
     return (
      <div> 
       <video {... props}> 
        <source src={this.props.src} type={this.props.type} id={this.props.id}/> 
       </video> 
<button onClick={this.next}>Next</button> 

      </div>) 

    } 
}; 

Answer 1

あなたは、さらに以下のようにstateでそれをリファクタリングする必要があり、

export default class PlayerLogic extends Component{ 

constructor() { 
     super(); 
     this.state = { 
      player : {} 
     }; 
    } 

    componentDidMount() { 
     var self = this; 
     var player = videojs(this.refs.video, this.props.options).ready(function() { 
      self.player = this; 
      self.player.on('play', self.handlePlay); 
     }); 

     player.markers({ 
      onMarkerReached: function() { 
       player.pause(); 
      }, 

      next : function() { 
       // go to the next marker from current timestamp 
       console.log("reached") 
       var currentTime = player.currentTime(); 
       for (var i = 0; i < markersList.length; i++) { 
        var markerTime = setting.markerTip.time(markersList[i]); 
        if (markerTime > currentTime) { 
         player.currentTime(markerTime); 
         break; 
        } 
       } 
      } 
     }); 

     this.setState({ player: player }); 
    } 

    next() { 
     this.state.player.next(); 
    } 

    render() { 
     return (
      <div> 
       <video {... props}> 
        <source src={this.props.src} type={this.props.type} id={this.props.id}/> 
       </video> 
<button onClick={this.next.bind(this)}>Next</button> 

Answer 2

私はあなたがリアクトを使用していることを理解しています。これは.jsxですか、.tsxですか？あなたはなぜ矢印機能を使用しないのですか？それはES6の機能です。あなたはこれを行うことができます。

next:() => { 
    ... 
} 

主に、すべてのブラウザがES6でサポートされています。あなたは、ブラウザのコンソールでこれを試すことができます。

let foo =() => 5; 
console.log(foo()); 

それとも、バベルを使用してバックES5にコードをコンパイルすることができます

https://babeljs.io/docs/learn-es2015/

ここでの問題は、あなたがfunctionを使用する場合は、Javascriptがそれを仮定しますですthis.nextはあなたのボタンnextメソッドであり、プレーヤーはnextメソッドではありません。あなたが行ったように機能() => {}がthisを保持します矢印：

var self = this; 
var callback = function() { 
    self.doSomethingHere(); 
} 

var player = video(...).ready(callback); 

をので、あなただけにあります。

let callback =() => { 
    this.doSomethingHere(); 
}