Javascript ReactJS:onClick-in子组件不会触发

我试图在JSX中创建一个子组件，它是一个包含onClick事件和事件处理程序的项目列表。永远不会调用事件处理程序。请帮我找出我做错了什么

• React-Chrome开发工具扩展显示了为每个“li”创建的“onClick”事件处理程序
• 上下文（this）是“Constructor”对象，其属性为“handleClick”函数

编辑： 多亏了@FakeRainBrigand，我才发现问题出在别处。 我发现，当我在父组件中使用事件处理程序隐藏/显示子组件时，它会停止触发onClick事件处理程序，因为父组件的隐藏操作会触发

JSX代码

var FilterList = React.createClass({
    handleClick: function(e){
        console.log(e);

    },
    render: function(){
        var ListItems = this.props.data.map(function(item){
            return (
                <li key={item.id} className="filter-item" onClick={this.handleClick}>
                    <span key={'img'+item.id} className={item.imgClass}></span>
                    <span key={'text'+item.id} className="item-text">{item.name}</span>
                </li>
            )

        }, this);
        return (
            <div className="filter-list">
                    <ul>
                        {ListItems}
                    </ul>
                </div>
            );
    }
});

---

您希望在componentDidMount而不是componentWillMount中进行服务器/ajax调用。您可以在此处的文档中查看原因

如果添加self=this会发生什么；然后将this.handleClick更改为self.handleClick

render:function（）{

self=this；
var ListItems=this.props.data.map（函数（项）{
返回(

{item.name}

)
}，这个）；

可能使用回调函数。在

onclick上使用回调，如下所示：

var FilterList = React.createClass({
handleClick: function(e){
    console.log(e);

},
render: function(){
    var ListItems = this.props.data.map(function(item){
        return (
            <li key={item.id} className="filter-item" onClick={() => this.handleClick}>
                <span key={'img'+item.id} className={item.imgClass}></span>
                <span key={'text'+item.id} className="item-text">{item.name}</span>
            </li>
        )

    }, this);
    return (
        <div className="filter-list">
                <ul>
                    {ListItems}
                </ul>
            </div>
        );
}
});

var FilterList=React.createClass({
handleClick:函数（e）{
控制台日志（e）；
},
render:function（）{
var ListItems=this.props.data.map（函数（项）{
返回(
this.handleClick}>
{item.name}

)
}，这个）；
返回(

{ListItems}

);
}
});
你的问题在其他地方。感谢jsbin示例。我可以看到它正在工作，我正式丢失了。完整的代码与jsbin相同，但我正在使用
组件willmount从服务器上获取
数据。
。你知道去哪里找吗？我可以重写部分代码。任何线索都很好，我一直在研究这是您使用的大写字母“ComponentWillMount”吗？函数以小写字母“c”开头：
ComponentWillMount
。
    self = this;
    var ListItems = this.props.data.map(function(item){

        return (
            <li key={item.id} className="filter-item" onClick={self.handleClick}>
                <span key={'img'+item.id} className={item.imgClass}></span>
                <span key={'text'+item.id} className="item-text">{item.name}</span>
            </li>
        )

    }, this);

var FilterList = React.createClass({
handleClick: function(e){
    console.log(e);

},
render: function(){
    var ListItems = this.props.data.map(function(item){
        return (
            <li key={item.id} className="filter-item" onClick={() => this.handleClick}>
                <span key={'img'+item.id} className={item.imgClass}></span>
                <span key={'text'+item.id} className="item-text">{item.name}</span>
            </li>
        )

    }, this);
    return (
        <div className="filter-list">
                <ul>
                    {ListItems}
                </ul>
            </div>
        );
}
});