删除评论 - React js [英] Delete a comment - React js
问题描述
实际上,我一直在尝试在我的评论栏系统中添加删除评论功能。
Actually, I've been trying to add a 'Delete a comment' functionality to my Comment Box system.
这是我的代码: -
Here is my code:-
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}> × </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);
现在,当我尝试删除注释时,它会抛出一个错误,显示'Uncaught TypeError:undefined不是函数'
Now, when I try to delete a comment, it throws an error that says 'Uncaught TypeError: undefined is not a function'
切换到devTool上的'source'选项卡,我发现问题出现在'onDelete'函数中。
Switching to 'source' tab on devTool, I found that the problem is in 'onDelete' function.
它说'onDelete'函数未定义。
It says, 'onDelete' function is undefined.
我认为问题是由于'this'关键字,但我是不确定。
我该怎么做才能解决这个问题?如果我错过了什么,请告诉我。(我是新手)
What should I do to resolve this issue? Let me know if I'm missing out on something.(I'm a newbie)
提前谢谢。
推荐答案
传递给 map
的函数不会自动共享这个
指向你的反应类。
The function passed to map
will not automatically share a this
pointer with your react class.
要在匿名函数中使用这个
,请调用 .bind(this)
在函数定义的末尾,产生一个函数,里面有这个
。
To use this
inside the anonymous function, call .bind(this)
at the end of the function definition to yield a function with the expected this
inside.
var commentNodes = this.props.comments.map(function (comment, index) {
...
});
成为:
var commentNodes = this.props.comments.map(function (comment, index) {
...
}.bind(this));
这篇关于删除评论 - React js的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!