React -将点击处理程序附加到动态子节点

Question

我想在我的电子应用程序中显示一个播放列表，它使用react+flux。由于某些原因，我不能为每个播放列表项附加点击处理程序。

下面是我的代码:

var Playlist = React.createClass({
    render: function() {
        var list = this.props.list;
        var playlist = [];
        for (var i = 0; i < list.length; ++i) {
            playlist.push(
                <PlaylistItem song={list[i]} key={i} />
            );
        }
        return (
            <ul className='playlist'>
                {playlist}
            </ul>
        )
    }
});
var PlaylistItem = React.createClass({
    _play: function() {
        console.log(this.props.song);
    },
    render: function() {
        var song = this.props.song;
        return (
            <li>
                <div className='playBtn'>
                    <i className='fa fa-play' onClick={this._play}>
                    </i>
                </div>
                <div className='info'>
                    <div className='artist'>{song.artist}</div>
                    <div className='title'>{song.title}</div>
                </div>
                <div className='rmBtn'>
                    <i className='fa fa-minus-circle'>
                    </i>
                </div>
                <div className='time'>{song.time}</div>
            </li>
        );
    }
});

我不明白为什么点击处理程序从不触发。我希望当点击I元素时，我能把歌曲对象放到控制台。

谢谢。编辑:我对此做了一些实验，每次我从商店(甚至假数据)获得数据时，点击处理程序不工作。但是，如果我将假数据移动到根组件中，则单击处理程序可以正常工作。

我已经多次检查数组中的对象是否相同。

我不明白为什么会发生这种行为。

有人知道吗?

Answer 1

您需要绑定onClick方法onClick={this._play.bind(this)}

Answer 2

我自己也遇到过这个问题，解决方法如下:https://stackoverflow.com/a/32623836/852872。希望这对你也有帮助。

那一页的答案

我还没有做过更深入的调查，为什么这对我不起作用，但问题是，在我的主文件中，我导入React为require('React')，但在其他组件上为require('React/addons')。从React/addons中导入React后，一切都像预期。