Why doesn't the event pass?

Question

JavaScript

Why doesn't alert("onEnded") work? I do everything according to the manual.
How to fix?

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}
                autoPlay={this.props.autoPlay}
                width={this.props.width}
                height={this.props.height}
                controls
                onEnded={this.props.onEnded}>
            </video>
        )
    }
});
var PlayerContainer = React.createClass({
    onEnded: function () {
        alert("onEnded")
    },
    render: function() {
        return <Player
            width="50%"
            height="50%"
            src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
            autoPlay=""/>
    }
});
React.render(
    <PlayerContainer />,
    document.body
);

How to run exactly in PlayerContainer?

Answer 1

use refs

var Player = React.createClass({
    componentDidMount: function() {
        this.refs.video.addEventListener("ended", this.onEnded, false);
    },
    onEnded: function() {
        alert("ended");
    },
    componentWillUnmount: function() {
        this.refs.video.removeEventListener("ended", this.onEnded, false);
    },
    render: function() {
        return <video ref="video" src={this.props.src} autoPlay={this.props.autoPlay} width={this.props.width} height={this.props.height} controls />;
    }
});
var PlayerContainer = React.createClass({
    render: function() {
        return <Player width="50%" height="50%" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" autoPlay="" />;
    }
});

ReactDOM.render(<PlayerContainer />, document.body);