我正在尝试在JSX中创建一个子组件,它是一个带有onClick事件和事件处理程序的项目列表。永远不会调用事件处理程序。请帮我弄清楚我做错了什么。
编辑: 感谢@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
)
)
);
}
});
答案 0 :(得分:0)
您希望在componentDidMount中调用server / ajax,而不是componentWillMount。您可以在此处的文档React Component Lifecycle
中查看原因答案 1 :(得分:0)
如果添加self = this会发生什么?并将this.handleClick更改为self.handleClick?
render:function(){
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);
答案 2 :(得分:0)
也许使用回调函数。像这样在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>
);
}
});