[英]React onClick event not firing
I am new to React and I am trying to create a upvote features on posts using React.js . 我是React的新手,我正在尝试使用React.js在帖子上创建upvote功能。 I have a
post_list_item.js.jsx
: 我有一个
post_list_item.js.jsx
:
var PostListItem = React.createClass({
render: function() {
return (
<div className="post">
<div className="post-upvote"><button type="button" class="btn btn-primary">Upvote</button></div>
<div className="post-body">
<h3>
<a href={this.props.post.title} target="_blank">{this.props.post.title}</a>
</h3>
<p>{this.props.post.content}</p>
</div>
<div className="post-controls">
<div className="post-control">
<div className="user-badge-container ">
<img src={this.props.post.user.picture_url} className="avatar"/>
</div>
</div>
</div>
</div>
);
}
});
and a upvote.js.jsx
: 和
upvote.js.jsx
:
var Upvote = React.createClass({
getInitialState: function() {
return {
post: this.props.post
}
},
render: function() {
var divClasses = classNames({
"post-upvote": true,
"post-upvote-upvoted": this.state.post.up_voted
});
return (
<div className={divClasses} onClick={this.handleClick}>
<div className="post-upvote-arrow"></div>
<div className="post-upvote-count">
{this.state.post.up_votes}
</div>
</div>
);
}
});
My post list appears with an upvote button next to each post. 我的帖子列表随即出现,每个帖子旁边都带有一个upvote按钮。 However, nothing happens when I click on the upvote button.
但是,当我单击upvote按钮时,什么也没有发生。
This is my handleClick() function that I added to my application.js file: 这是我添加到application.js文件中的handleClick()函数:
var handleClick = function() {
var that = this;
$.ajax({
type: 'POST',
url: Routes.upvote_post_path(this.props.post.id, { format: 'json' }),
success: function(data) {
that.setState({ post: data });
}
});
}
Did I miss something ? 我错过了什么 ?
When you say {this.handleClick}
(inside your react component), it means "use the handleClick function defined on this component". 当您说
{this.handleClick}
(在react组件内部)时,它的意思是“使用此组件上定义的handleClick函数”。 The function should be with the others, in your var Upvote = react.createClass
(it should be an instance method, basically). 该函数应该与其他函数一起使用,在您的
var Upvote = react.createClass
(基本上,它应该是一个实例方法)。
In Upvote
component there is no method handleClick
, so you pass to onClick
undefined
., move handleClick
method to Upvote
在
Upvote
组件没有方法handleClick
,所以你传递给onClick
undefined
,移动handleClick
方法Upvote
var Upvote = React.createClass({
getInitialState: function() {
return {
post: this.props.post
}
},
handleClick: function() {
var that = this;
$.ajax({
type: 'POST',
url: Routes.upvote_post_path(this.props.post.id, { format: 'json' }),
success: function(data) {
that.setState({ post: data });
}
});
},
render: function() {
var divClasses = classNames({
"post-upvote": true,
"post-upvote-upvoted": this.state.post.up_voted
});
return (
<div className={divClasses} onClick={this.handleClick}>
<div className="post-upvote-arrow"></div>
<div className="post-upvote-count">
{this.state.post.up_votes}
</div>
</div>
);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.