我正在尝试在JSX中创建一个子组件,它是一个带有onClick事件和事件处理程序的项目列表。但是事件处理程序从未被调用。请帮我找出我做错了什么。
生成的JS代码:
- React Chrome开发者工具扩展显示为每个"li"创建了一个"onClick"事件处理程序
- 上下文(this)是"Constructor"对象,该对象具有"handleClick"函数作为属性。
编辑: 感谢@FakeRainBrigand,我发现问题出在其他地方。 我发现当我使用父组件中的事件处理程序隐藏/显示子组件时,它停止触发onClick事件处理程序,因为父级的隐藏操作会触发。 JSBIN
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>
);
}
});
生成的JS代码:
var FilterList = React.createClass({displayName: 'FilterList',
handleClick: function(e){
console.log(e);
},
render: function(){
var ListItems = this.props.data.map(function(item){
return (
React.DOM.li( {key:item.id, className:"filter-item", onClick:this.handleClick},
React.DOM.span( {key:'img'+item.id, className:item.imgClass}),
React.DOM.span( {key:'text'+item.id, className:"item-text"}, item.name)
)
)
}, this);
return (
React.DOM.div( {className:"filter-list"},
React.DOM.ul(null,
ListItems
)
)
);
}
});
ComponentWillMount
从服务器获取data
。有任何想法在哪里寻找?我可以重写部分代码。任何线索都可以,我已经卡在这个问题上一整天了。 - abhinavcomponentWillMount
。 - Ross Allen