[英]anchor tag (a tag) onclick event handler not working
虽然我已经包括在由reactjs组件(名称renderLocationLink分量)的渲染方法返回的HTML 标签的onclick处理程序,虽然渲染发生正确的onclick处理程序属性犯规出现在网页上所提供的HTML我希望无法解决问题,这是代码
var feedApp = React.createClass({
getInitialState: function(){
return {
data : [
{display_name:"Rao",content:"this is Rao post",links:['link1','link2','link3']},
{display_name:"Sultan",content:"this is Sultans",links:['link4','link5','link6']},
{display_name:"John",content:"this is John post",links:['link7','link8','link9']}
]
}
},
fetchFeedsFromUrl: function(){
console.log('Onclick triggered');
},
render: function(){
return (<Feeds data={this.state.data} onClick={this.fetchFeedsFromUrl} />)
}
})
var Feeds = React.createClass({
render: function(){
var onClickfunc = this.props.onClick;
var feeds = this.props.data.map(function(feed){
return (
<oneFeed name={feed.display_name} onClick={this.onClickfunc} content={feed.content} links={feed.links} />
)
});
return(
<div> {feeds} </div>
)
}
})
var oneFeed = React.createClass({
render: function() {
return (
<div>
<h3>{this.props.name}</h3>
<renderLocationLink onClick={this.props.onClick} linkArray={this.props.links} />
<p>{this.props.content} </p>
</div>
)
}
});
var renderLocationLink = React.createClass({
render: function(){
var onClick = this.props.onClick;
var locationLinks = this.props.linkArray.map(function(link,index){
return (<a onClick={this.onClick} href={link}>{link} </a>)
})
return ( <div >{locationLinks}</div> )
}
})
React.renderComponent(feedApp(null),document.body);
您不需要在地图函数中引用“this”来访问本地变量。 当您尝试访问onClick变量时删除“this”。
var renderLocationLink = React.createClass({
render: function(){
var onClick = this.props.onClick;
var locationLinks = this.props.linkArray.map(function(link,index){
return (<a onClick={onClick} href={link}>{link} </a>)
})
return ( <div >{locationLinks}</div> )
}
})
渲染的标记不包含onClick
属性。 您在JSX标记中编写的内容不是直接的HTML标记。
相反,React将为您的标记提供data-reactid
属性,并确保在单击特定data-reactid
绑定时,它自己的事件处理程序会触发某些内容。
好的,所以我发现了它出错的地方:
在许多组件,你用this
错误。 您在渲染功能中使用this
。 因此,您应该使用{onClick}
而不是使用{this.onClick}
。
看看这个例子,我们如何在返回的渲染中使用{onClick}
(而不是{this.onClick}
)。
var Feeds = React.createClass({
render: function(){
var onClickfunc = this.props.onClick;
var feeds = this.props.data.map(function(feed){
return (
<oneFeed name={feed.display_name} onClick={onClickfunc} content={feed.content} links={feed.links} />
)
});
return(
<div> {feeds} </div>
)
}
})
这是一个有效的JSFiddle: http : //jsfiddle.net/kb3gN/6771/
PS:这与Butters建议完全一样。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.