Почему не передает событие?

Question

[Millerish]

Почему не срабатывает alert("onEnded")? Все вроде делаю по мануалу.
Как поправить?

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
);

Как запустить именно в PlayerContainer?

Answer 1

[Ваге]

используйте 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);

Comments

[Millerish]

Мартин, в Player работает, в том то и дело. Мне нужно чтобы он заработал в PlayerContainer. Я пробовал ( 'ended', this.props.onEndeds ) и ( 'ended', this.props.onEndeds() ) и ( 'ended', this.onEndeds ). Но вызов не доходит... Как правильно?

[Millerish]

Мартин: 2.jsx:21 Uncaught ReferenceError: ReactDOM is not defined
at :21:1
at run (https://unpkg.com/react@0.12.0/dist/JSXTransformer...
at check (https://unpkg.com/react@0.12.0/dist/JSXTransformer...
at result.(anonymous function).error (https://unpkg.com/react@0.12.0/dist/JSXTransformer...
at XMLHttpRequest.xhr.onreadystatechange (https://unpkg.com/react@0.12.0/dist/JSXTransformer...

[Ваге]

надо использовать https://cdnjs.cloudflare.com/ajax/libs/react/15.6....
https://cdnjs.cloudflare.com/ajax/libs/react/15.6....
а не Dev-сборка

https://jsfiddle.net/vaheqelyan/9odduvxz/

[Millerish]

https://jsfiddle.net/9odduvxz/1/

При использования this.refs.video.addEventListener("ended", this.onEnded, false); метод onEnded в PlayerContainer не работает.

Может что-то не понял?

[Millerish]

так тоже https://jsfiddle.net/9odduvxz/2/

Answer 2

[Роман Александрович]

папробуй мой вариант
https://jsfiddle.net/fugekyvt/
Функция onEnded передаётся в Player вот так
onEnded={this.onEnded}
таким образом в компоненте мы получает к нему доступ при обращении this.props.onEnded
А дальше навешиваем листенер

Answer 3

[Millerish]

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
);