Javascript 删除评论-回复js

实际上，我一直在尝试向我的评论框系统添加“删除评论”功能

这是我的密码：-

var Comment = React.createClass({
  handleClick: function(e){
    e.preventDefault();
    var commentId = this.props.comment.id;
    return this.props.onDelete(commentId);
  },
  render: function () {
    return (
      <div className="comment">
        <h4 className="commentAuthor">
          {this.props.comment.email}
        </h4>
          {this.props.comment.comment}
          <a onClick={this.handleClick}> &times; </a>
      </div>
      );
  }
});

var CommentList = React.createClass({
  handleDelete: function(commentId){
    return this.props.del(commentId);
  },
  render: function () {
    var commentNodes = this.props.comments.map(function (comment, index) {
      return (
        <Comment comment = {comment} onDelete = {this.handleDelete} key = {index} />
        );
    });

    return (
      <div className="commentList">
        {commentNodes}
      </div>
      );
  }
});

var CommentBox = React.createClass({
  getInitialState: function () {
    return {comments: []};
  },
  componentDidMount: function () {
    this.loadCommentsFromServer();
  },
  loadCommentsFromServer: function () {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      success: function (comments) {
        this.setState({comments: comments});
      }.bind(this),
      error: function (xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  handleCommentSubmit: function(comment) {
    var comments = this.state.comments;
    var newComments = comments.concat([comment]);
    this.setState({comments: newComments});
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      type: 'POST',
      data: {"comment": comment},
      success: function(data) {
        this.loadCommentsFromServer();
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  delc: function(commentId){
    $.ajax({
      url: this.props.url,
      data: {"id" : commentId},
      type: 'DELETE',
      dataType: 'json',
      success: function (comments) {
        this.setState({comments: comments});
      }.bind(this), 
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
      });
  },
  render: function () {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList del={this.delc} comments={this.state.comments} />
        <CommentForm onCommentSubmit={this.handleCommentSubmit}/>
      </div>
      );
  }
});

var CommentForm = React.createClass({
  handleSubmit: function() {
    var email = this.refs.email.getDOMNode().value.trim();
    var comment = this.refs.comment.getDOMNode().value.trim();
    this.props.onCommentSubmit({email: email, comment: comment});
    this.refs.email.getDOMNode().value = '';
    this.refs.comment.getDOMNode().value = '';
    return false;
  },

  render: function() {
    return (
      <form className="commentForm" onSubmit={this.handleSubmit}>
        <input type="email" placeholder="Your email" ref="email" />
        <input type="text" placeholder="Say something..." ref="comment" />
        <input type="submit" value="Post" />
      </form>
      );
  }
});

var ready = function () {
  React.renderComponent(
    <CommentBox url="18/comments.json" />,
    document.getElementById('art')
  );
};

$(document).ready(ready);

var Comment=React.createClass({
handleClick:函数（e）{
e、 预防默认值（）；
var commentId=this.props.comment.id；
返回此.props.onDelete（commentId）；
},
渲染：函数（）{
返回(
{this.props.comment.email}
{this.props.comment.comment}
&时代；
);
}
});
var CommentList=React.createClass({
handleDelete:函数（commentId）{
返回这个.props.del（commentId）；
},
渲染：函数（）{
var commentNodes=this.props.comments.map（函数（注释，索引）{
返回(
);
});
返回(
{commentNodes}
);
}
});
var CommentBox=React.createClass({
getInitialState:函数（）{
返回{注释：[]}；
},
componentDidMount:函数（）{
this.loadCommentsFromServer（）；
},
loadCommentsFromServer:函数（）{
$.ajax({
url:this.props.url，
数据类型：“json”，
成功：功能（评论）{
this.setState（{comments:comments}）；
}.绑定（此），
错误：函数（xhr、状态、错误）{
console.error（this.props.url，status，err.toString（））；
}.绑定（此）
});
},
handleCommentSubmit:函数（注释）{
var注释=this.state.comments；
var newComments=comments.concat（[comment]）；
this.setState（{comments:newComments}）；
$.ajax({
url:this.props.url，
数据类型：“json”，
键入：“POST”，
数据：{“注释”：注释}，
成功：功能（数据）{
this.loadCommentsFromServer（）；
}.绑定（此），
错误：函数（xhr、状态、错误）{
console.error（this.props.url，status，err.toString（））；
}.绑定（此）
});
},
delc：函数（commentId）{
$.ajax({
url:this.props.url，
数据：{“id”：commentId}，
键入：“删除”，
数据类型：“json”，
成功：功能（评论）{
this.setState（{comments:comments}）；
}.绑定（此），
错误：函数（xhr、状态、错误）{
console.error（this.props.url，status，err.toString（））；
}.绑定（此）
});
},
渲染：函数（）{
返回(
评论
);
}
});
var CommentForm=React.createClass({
handleSubmit:function（）{
var email=this.refs.email.getDOMNode（）.value.trim（）；
var comment=this.refs.comment.getDOMNode（）.value.trim（）；
this.props.onCommentSubmit（{email:email，comment:comment}）；
this.refs.email.getDOMNode（）.value=''；
this.refs.comment.getDOMNode（）.value=''；
返回false；
},
render:function（）{
返回(
);
}
});
var ready=函数（）{
React.renderComponent(
,
document.getElementById（'art'）
);
};
$（文件）。就绪（就绪）；

现在，当我试图删除注释时，它抛出一个错误，上面写着“UncaughtTypeError:undefined不是函数”

切换到devTool上的“source”选项卡，我发现问题出在“onDelete”函数中

它说，“onDelete”函数未定义

我认为这个问题是由于“this”关键字造成的，但我不确定

我应该如何解决此问题？如果我错过了什么，请告诉我。（我是新手）

---

提前感谢。

传递到

map

的函数将不会自动与您的react类共享

此

指针

要在匿名函数中使用

this

，请在函数定义末尾调用

.bind（this）

，以生成一个内部包含预期

this

的函数

var commentNodes = this.props.comments.map(function (comment, index) {
    ...
});

变成：

var commentNodes = this.props.comments.map(function (comment, index) {
    ...
}.bind(this));

---

你没有绑定传递给这个.props.comments.map的函数。我想我明白了。初始化：'var that=this；'然后'onDelete={that.handleDelete}'应该可以工作吗？是的，或者你可以做

.map（函数（注释，索引）{…}.bind（这个））

或者

.map（函数（注释，索引）{…}，这个）

啊哈，它工作了！非常感谢，先生！：）还有一个问题，现在我遇到了另一个问题。你能检查一下我的“delc”功能，看看它是否有问题吗？当我试图删除时，它会说，“删除404（未找到）18/comments.json error Not Found。我在这里写错了什么吗？@FakeRainBrigand-将您的评论作为答案发布，以便Akashbdj可以接受。