Reactjs React onClick事件未触发

我是React的新手，我正在尝试使用React.js在帖子上创建一个upvote功能。我有一个

post\u list\u 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>
    );
  }
});

“我的帖子列表”会在每个帖子旁边显示一个向上投票按钮。但是，当我单击upvote按钮时，什么也没有发生

这是我添加到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 });
      }
    });
  }

---

我错过什么了吗

当你说

{this.handleClick}

（在react组件内部）时，它的意思是“使用此组件上定义的handleClick函数”。

---

函数应该与其他函数一起，在您的

var Upvote=react.createClass

（它基本上应该是一个实例方法）。

当您说

{this.handleClick}

（在您的react组件内）时，它意味着“使用在该组件上定义的handleClick函数”。

---

函数应该与其他函数一起，在

var-Upvote=react.createClass

（基本上应该是一个实例方法）。

在

Upvote

组件中没有方法

handleClick

，因此将

onClick

未定义的

，将
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>
    );
  }
});

var Upvote=React.createClass({
getInitialState:函数（）{
返回{
帖子：this.props.post
}
},
handleClick:function（）{
var=这个；
$.ajax({
键入：“POST”，
url:Routes.upvote_post_path（this.props.post.id，{format:'json'}），
成功：功能（数据）{
setState（{post:data}）；
}
});
},
render:function（）{
var divClasses=类名({
“投票后”：没错，
“投票后向上投票”：this.state.post.up\u投票
});
返回(
{this.state.post.up_voces}
);
}
});
在
Upvote
组件中没有方法
handleClick
，因此您要传递到
onClick

，将

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>
    );
  }
});

var Upvote=React.createClass({
getInitialState:函数（）{
返回{
帖子：this.props.post
}
},
handleClick:function（）{
var=这个；
$.ajax({
键入：“POST”，
url:Routes.upvote_post_path（this.props.post.id，{format:'json'}），
成功：功能（数据）{
setState（{post:data}）；
}
});
},
render:function（）{
var divClasses=类名({
“投票后”：没错，
“投票后向上投票”：this.state.post.up\u投票
});
返回(
{this.state.post.up_voces}
);
}
});