anchor标记(一个标记)onclick事件处理程序不工作
anchor tag (a tag) onclick event handler not working
虽然我已经在reactjs组件(名为renderLocationLink的组件)的render方法返回的html中包含了a标记的onclick处理程序,但尽管渲染正确,onclick handler属性不会出现在网页上渲染的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
。因此,与其使用{this.onClick}
您应该使用{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/
附言:这正是巴特斯建议的。
相关文章:
- 如何向onClick事件处理程序传递一个接受参数的函数,并且仍然将该函数绑定到组件's”;这个“;上下文
- 多个类上的Javascript onclick事件处理程序
- 在这种情况下使用onclick事件处理程序可以接受吗
- 加载文档时的HTML onClick事件处理
- 使用 RequireJS 和 JQuery onclick 事件处理“this”
- 似乎未调用 Onclick 事件处理程序
- 为什么当同级节点的“display”属性发生更改时,React 组件的 onClick 事件处理程序不会触发
- 链接到boostrap的Javascript代码会阻止onclick事件处理程序运行
- onClick 事件处理程序不会触发
- 如何将简单的 onClick 事件处理程序添加到画布元素
- QuerySelectorAll无法处理onclick事件
- anchor标记(一个标记)onclick事件处理程序不工作
- 使用事件处理程序而不是onClick来激发API函数
- 用符合内容安全策略的代码替换多个内联按钮onclick事件处理程序
- 我必须点击两次,为什么?(JavaScript onclick事件处理程序)
- 为什么游标、不透明属性和onclick事件处理程序在IE9上不起作用
- 事件处理-onClick-使用带有<嵌入>标签
- 一些javascript代码不工作-事件处理程序'onclick'中的if()语句
- JqueryUI对话框打开处理onclick事件与旧的目标实例
- 哪个更好:使用触发事件的onclick或find元素来处理jQuery中的事件