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 后，一切都像 预计。