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'），但在其他组件上需要（'React / addons'）。从react / addons导入React后，一切正常预期

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

2 个答案: