Question

视频播放完毕后，我正在尝试自动关闭灯箱。

onEnded属性在99.99％的时间内效果很好，但有时不会触发回调。因此，我尝试使用onDuration。

在设置为onDuration的回调中发生上述错误。控制台可以正常打印时间，但是我不确定为什么无法识别以下方法并引发错误。 this.props.lightBoxHandler(this.props.entry.type);

  renderEntry() {
        if (this.props.entry.type === "photo") {
            this.disableLightbox();
         return  <img alt={Math.random()} src={this.props.entry.entry} onClick={ () => this.props.lightBoxHandler(this.props.entry.type)} />
        } 
        if (this.props.entry.type === "video") {
        return   <ReactPlayer
            url={this.props.entry.entry}
            className='react-player'
            playing={true}
            width='100%'
            height='100%'
            onEnded={() => this.props.lightBoxHandler(this.props.entry.type)}
            onDuration={(duration) => {
                console.log("Duration " + duration);
                setTimeout(function () {
                    this.props.lightBoxHandler(this.props.entry.type);
            }, duration*1000)  }}
            />
        }
    }

    render() {
        let classList = this.props.entry.is === true ? "lightbox-wrapper active" : "lightbox-wrapper";
        return ( 
            <React.Fragment>
                <div className={classList}>
                    {this.renderEntry()}
                </div>
            </React.Fragment>
         );
    }

Answer 1

TLDR：将setTimeout中的函数更改为箭头函数，它应该可以工作。

在this.props.lightBoxHandler中定义onEnded但在onDuration中未定义的原因是，在onDuration中，您正在{{ 1}}是用this.props关键字声明的，而不是箭头函数。

箭头函数在词汇范围内使用setTimeout。用function定义的函数有自己的this。

请参阅：https://hackernoon.com/javascript-es6-arrow-functions-and-lexical-this-f2a3e2a5e8c4

TypeError：无法读取未定义的属性“ lightBoxHandler”

1 个答案: