調用另一個函數內部的函數

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

我明白你正在使用React，對！這是.jsx還是.tsx？爲什麼你不使用箭頭功能。這是一個ES6功能。您可以這樣做：

next:() => { 
    ... 
} 

大多數情況下，所有瀏覽器都支持ES6。您可以在瀏覽器控制檯試試這個：

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

，也可以使用通天編譯代碼回ES5：

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

這裏的問題是，當你使用function，JavaScript的假設this.next是您的按鈕next方法，而不是您的播放器next方法。 Arrow功能() => {}將保留this像你一樣：

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

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

所以你就必須：

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