Question

我正在尝试从外部调用Json内部的函数。我想触发＆＃34; next＆＃34;功能按钮＆＃34; onClick＆＃34;方法。这是我的代码。我尝试通过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

我知道你正在使用React，对吧！这是.jsx还是.tsx？为什么你不使用箭头功能。这是ES6的功能。你可以这样做：

next: () => {
    ...
}

大多数情况下，ES6支持所有浏览器。您可以在浏览器控制台中尝试此操作：

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

或者您可以使用babel将代码编译回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();
}

Answer 2

您必须使用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>

调用另一个函数内的函数

2 个答案: