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} />
获得不了 this 就要想想 this 指向是否有问题,这个强调了多次 要注意。第二,就是你要删除一条评论,是否要把要删的是哪条评论传出去呢?要不在你的 App 中怎么知道要删除哪条?
// 我来写一下删除按钮的生成与功能的实现,我是后端,没学过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
讲师都告诉你了没传索引
他这个应该怎么写我也不知道 this指向没有问题吧?不解
this指向的问题吧