Question

我试图在箭头函数中调用一个函数但不知何故它不起作用。我做错了什么？

这不起作用：

restartVideo(ref){
 ref.player.seek(0)
}

onProgress={() => {this.state.restart ? this.restartVideo : null}}

这样做：

onProgress={() => {this.state.restart ? ref.player.seek(0) : null}}

整个组件：

<Video source={video}   // Can be a URL or a local file.
       ref={ref => this.player = ref} // Store reference
       rate={1.0}                     // 0 is paused, 1 is normal.
       paused={this.state.paused}                 // Pauses playback entirely.
       onLoadStart={this.loadStart}   // Callback when video starts to load
       onProgress={() => {this.state.restart ? this.restartVideo : null}}      // Callback every ~250ms with currentTime
       onEnd={this.backToQuestion}             // Callback when playback finishes
       onError={this.videoError}      // Callback when video cannot be loaded
       style={styles.video} />

在console.log()

中未触发restartVideo()的事件

Answer 1

更改

onProgress={() => {this.state.restart ? this.restartVideo : null}}

到

onProgress={() => {this.state.restart ? this.restartVideo() : null}}

即。分配调用 this.restartVideo的函数，而不是返回它的函数。

顺便说一句，看起来你也应该传递ref（或通过函数中的this访问它）。

Answer 2

如果你在这一行中加上括号：

onProgress = {（）=＆gt; {this.state.restart？ this.restartVideo（）：null}}

你可以看到这个jsfiddle，我尝试根据你的代码制作类似的东西： https://jsfiddle.net/69z2wepo/63824/

class VideoContainer extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      restart: false
    }
  }

  componentDidMount(){
   setTimeout(function() { this.setState({restart: true}); }.bind(this), 3000);
  }

  restartVideo() {
    console.log('Video restarting...')
  }

  render() {
    return (
      <video
      width="400" controls
      src="http://www.quirksmode.org/html5/videos/big_buck_bunny.webm"
       onProgress={() => {this.state.restart ? this.restartVideo() : null}}      
      />
    )
  }
}

ReactDOM.render(
  <VideoContainer  />,
  document.getElementById('container')
);

我希望你帮助你

在箭头函数内调用函数不起作用

2 个答案: