课后作业删除还是实现不出来-慕课网

课后作业删除还是实现不出来

来源：4-2 留言本实例编码

666c

2018-10-27 17:05

CommentList.js：

<button
type="submit"
className="btn btn-danger btn-sm ml-3"
onClick={(e) => {this.props.onDeleteComment(e)}}
>
删除
</button>

我在CommentList.js中增加了一个删除的button，点击按钮，可以调用App.js中的deleComment()方法，但是这个方法中一旦获取this.state.comments就报错，说是获取不到comments。

App.js：

deleComment(){
// console.log(111)
const comments = this.state.comments
console.log(comments)
}

<CommentList
comments={comments}
onDeleteComment = {this.deleComment}
/>

写回答关注

5回答

张轩

2018-10-30 09:49:33

获得不了 this 就要想想 this 指向是否有问题，这个强调了多次要注意。第二，就是你要删除一条评论，是否要把要删的是哪条评论传出去呢？要不在你的 App 中怎么知道要删除哪条？

0 0
qq_长流_0

2018-12-04 16:21:32
// 我来写一下删除按钮的生成与功能的实现，我是后端，没学过ECMAScript
// 只是单单实现了这个功能，不知道在实现上对不对
// 当时老师写这个组件的时候用的是函数式，我个人感觉这里使用函数式不方便就改成了类
// 还有就是不需要把当前组件的事件转移到App.js中的吧
import React from 'react'
class CommentList extends React.Component{
constructor(props){
super(props)
this.removeElement = this.removeElement.bind(this)
}
removeElement(event){
event.target.parentElement.remove()
}
render() {
const {comments} = this.props
return (
<div className="comment-list-component">
<label htmlFor="">评论列表</label>
<ul className="list-group mb-3">
{
comments.map((comment, index) =>
<li key={index} className="list-group-item">{comment}  
<a
className="btn btn-link text-danger"
onClick={this.removeElement}
>删除</a>
</li>
)
}
</ul>
</div>
)
}
}
export default CommentList
0 0
pardon110

2018-11-19 13:05:56

讲师都告诉你了没传索引

0 0
盛夏光年16

2018-11-11 19:29:37

他这个应该怎么写我也不知道 this指向没有问题吧？不解

0 0
qq_恹鱼_0

2018-10-28 23:41:56

this指向的问题吧

0 0