Javascript reactjs中未定义的函数

Javascript reactjs中未定义的函数,javascript,jquery,reactjs,Javascript,Jquery,Reactjs,我不确定我做错了什么,但最基本的是: /** @jsx React.DOM */ /** * Deal with creating a set of posts for a table. */ var PostRow = React.createClass({ handleDelete: function(id){ var postToDelete = AisisWriter.Models.Post(); postToDelete.set({id: this});

我不确定我做错了什么,但最基本的是:

/** @jsx React.DOM */

/**
 * Deal with creating a set of posts for a table.
 */
var PostRow = React.createClass({

  handleDelete: function(id){
    var postToDelete = AisisWriter.Models.Post();
    postToDelete.set({id: this});
    posttoDelete.destroy().then(this.deleted, this.fail)
    return false;
  },

  deleted: function() {
    console.log('Success - check the db for this post');
  },

  fail: function() {
    console.log('Fail');
  },

  render: function(){
    // Loop through the post objects.
    var post = this.props.posts.map(function(postObject) {
        var content = null;
        var title = null;

        // Cut off the text at anything over 140 characters
        if (postObject.content.length > 140){
           content = postObject.content.substr(0, 140) + '...';
        }else{
          content = postObject.content;
        }

        // Cut off the text at anything voer 20 characters
        if (postObject.title.length > 20){
          title = postObject.title.substr(0, 20) + '...';
        }else{
          title = postObject.title;
        }

        // Return the rows of the table.
        // React makes us have a unique key.
        return (
          <tr key={postObject.id}>
            <td>{title}</td>
            <td>{content}</td>
            <td>
              <a href={"#/post/" + postObject.id} className="btn btn-primary move-right-10px">View</a>
              <a href={"#/post/" + postObject.id + '/edit'} className="btn btn-success move-right-10px">Edit</a>
              <button className="btn btn-danger" onClick={this.handleDelete(postObject.id)}>Delete</button>
            </td>
          </tr>
        );
    });

    // Finially return the rows (note the div)
    return (
          <div>{post}</div>
      );
  }
});
/**@jsx React.DOM*/
/**
*处理为表创建一组帖子。
*/
var PostRow=React.createClass({
handleDelete:函数(id){
var postToDelete=AisisWriter.Models.Post();
set({id:this});
posttoDelete.destroy().then(this.deleted,this.fail)
返回false;
},
已删除:函数(){
log('Success-检查数据库中是否有此帖子');
},
失败:函数(){
console.log('Fail');
},
render:function(){
//在post对象中循环。
var post=this.props.posts.map(函数(postObject){
var-content=null;
var title=null;
//将超过140个字符的文本切掉
如果(postObject.content.length>140){
content=postObject.content.substr(0,140)+'…';
}否则{
content=postObject.content;
}
//在超过20个字符的地方切掉文本
如果(postObject.title.length>20){
title=postObject.title.substr(0,20)+'…';
}否则{
title=postObject.title;
}
//返回表中的行。
//React使我们拥有一把独一无二的钥匙。
返回(
{title}
{content}
删除
);
});
//最终返回行(注意div)
返回(
{post}
);
}
});
我遇到的问题是,如果我这样做:
this.handleDelete
life is grand,页面将加载。但是我需要传入这个特定post id的id,所以我试着做你看到的:
this.handleDelete(postObject.id)
在那一点上我得到了什么:
Uncaught TypeError:undefined总体上不是一个函数
this.handleDelete(postObject.id)

我已经进入回拨地狱了吗?我做错了什么吗?

使用时,默认情况下函数的上下文属于全局范围,即
指浏览器中的
窗口。调用上下文将其设置为组件时,可以将上下文传递给
map
,就像代码所期望的那样:

// Add a `this` as the second argument to `map` to set the context to
// the current component. `this.handleDelete` will then refer to the component's
// `handleDelete` function like you are expecting.
var post = this.props.posts.map(function(postObject) {
  ...
    <button className="btn btn-danger" onClick={this.handleDelete.bind(this, postObject.id)}>Delete</button>
  ...
}, this);

是的,本是正确的。
this.handleDelete
中的
this
未绑定任何内容,因此它将引用全局范围窗口,而不是
PostRow
实例。
// The current form is a function call
this.handleDelete(postObject.id)

// `bind` returns a new function that will be passed `postObject.id` when it is
// called by React.
this.handleDelete.bind(this, postObject.id)