Javascript 锚标记（一个标记）onclick 事件处理程序不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26587754/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
anchor tag (a tag) onclick event handler not working
提问by Karthic Rao
Though i have included the onclick handler for the atag in the html returned by the render method of the reactjs component(component with the name renderLocationLink) , though the rendering takes place correctly the onclick handler attribute doesnt appear in the rendered html on the webpage .I want the Not able to figure whats the issue , here is the code
虽然我已经在 reactjs 组件的渲染方法返回的 html 中包含了a标记的 onclick 处理程序（组件名称为 renderLocationLink），尽管渲染正确发生，但 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);
采纳答案by Butters
You do not need to reference "this" in your map functions to access your local variable. Remove "this" when you try to access the onClick variable.
您不需要在映射函数中引用“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> )
}
})
回答by Daniel Apt
Your rendered markup will not contain an onClickattribute. What you write in your JSX markup is not a direct HTML markup.
您呈现的标记将不包含onClick属性。您在 JSX 标记中编写的内容不是直接的 HTML 标记。
What will happen instead is that React will give your markup a data-reactidattribute, and will make sure its own event handlers fire something when a specific data-reactidgets clicked.
相反，React 会给你的标记一个data-reactid属性，并确保它自己的事件处理程序在特定的data-reactid被点击时触发一些东西。
回答by Daniel Apt
Ok, so I have found out where it goes wrong:
好的，所以我发现了哪里出错了：
In many components you were using thisincorrectly. You were using thiswithin the render function. So instead of using
{this.onClick}you should have been using {onClick}instead.
在许多组件中，您使用this不当。您this在渲染函数中使用。因此，
{this.onClick}您应该使用{onClick}而不是使用。
Look at this example, how we use {onClick}(and not {this.onClick}) in the returned render.
看看这个例子，我们如何在返回的渲染中使用{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>
)
}
})
Here's a working JSFiddle: http://jsfiddle.net/kb3gN/6771/
这是一个有效的 JSFiddle：http: //jsfiddle.net/kb3gN/6771/
PS: This is exactly as Butterssuggested.
PS：这正是巴特斯所建议的。
