子组件中的onClick不触发
ReactJS : onClick in sub-component does not trigger
我试图在JSX中创建一个子组件,这是一个带有onClick事件和事件处理程序的项目列表。事件处理程序永远不会被调用。请帮我找出我做错了什么。
- React Chrome开发者工具扩展显示为每个"li"创建一个"onClick"事件处理程序
- context (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
)
)
);
}
});
如果添加self = 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);
你想让你的服务器/ajax调用在componentDidMount,而不是componentWillMount。你可以在这里的文档中查看原因React Component Lifecycle
可以使用回调函数。在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>
);
}
});
相关文章:
- 如何向onClick事件处理程序传递一个接受参数的函数,并且仍然将该函数绑定到组件's”;这个“;上下文
- 如何使用onClick处理程序在React组件中创建链接
- Reactjs组件与onClick同时更新
- React 渲染一个组件会触发 onClick 事件
- React组件onClick处理程序不工作
- React,将onClick事件直接添加到组件中,而不是在所述组件中渲染元素
- React 组件不会在 onClick 事件后重新渲染
- 为什么当同级节点的“display”属性发生更改时,React 组件的 onClick 事件处理程序不会触发
- ReactJS 从父组件的 onClick 方法更新对子组件的 ajax 调用
- 如何将数据从子组件获取到 props 中传递的按钮的 onclick 中
- 应用样式“;游标:指针”;所有具有onClick功能的React组件
- react js子组件onclick事件未被调用
- 为什么React组件在渲染时启动onClick事件,而不是在单击时启动
- Meteor React组件onClick事件在IE中不起作用
- 如何在react中onclick将一个组件插入到另一个组件中
- 在React中访问父组件的方法onClick
- 如何让react.js组件onclick动画并检测动画的结束?
- 子组件中的onClick不触发
- React:组件只在按钮的第二次onClick时呈现新值
- React-intl禁用react-router's在Safari v8.0.8中链接组件onClick事件