javascript - 为什么事件没有通过？

为什么警报（“ onEnded”）不起作用？所有人都喜欢在手册上做。

如何在PlayerContainer中启动它？

var PLAYER_ID = 'player';
var Player = React.createClass({
    componentDidMount: function() {
        document.getElementById(PLAYER_ID).addEventListener( 'ended', this.onEnded )
    },
    componentWillUnmount: function() {
        document.getElementById(PLAYER_ID).removeEventListener( 'ended', this.onEnded )
    },
    render: function () {
        return (
            <video
                id={PLAYER_ID}
                src={this.props.src}
            </video>
        )
    }
});
var PlayerContainer = React.createClass({
    onEnded: function () {
        alert("onEnded")
    },
    render: function() {
        return <Player
            src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"/>
    }
});
React.render(
    <PlayerContainer />,
    document.body
);

如何解决？

很抱歉这个愚蠢的问题。我研究React.js

最佳答案

this中的this.onEnded是指Player实例而不是PlayerContainer实例，并且Player没有onEnded方法，请尝试以下操作：

var PLAYER_ID = 'player';
var Player = React.createClass({
    componentDidMount: function() {
        document.getElementById(PLAYER_ID).addEventListener( 'ended', this.props.onEnded )
    },
    componentWillUnmount: function() {
        document.getElementById(PLAYER_ID).removeEventListener( 'ended', this.props.onEnded )
    },
    render: function () {
        return (
            <video
                id={PLAYER_ID}
                src={this.props.src}
            </video>
        )
    }
});
var PlayerContainer = React.createClass({
    onEnded: function () {
        alert("onEnded")
    },
    render: function() {
        return <Player
            src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
            onEnded={this.onEnded}/>
    }
});
React.render(
    <PlayerContainer />,
    document.body
);