怎么把commentLists中的index传递到APP.js中

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

怎么把commentLists中的index传递到APP.js中

commentsList.js handleDelete(index){console.log(index)this.props.delete(index);}render (){const {comments} = this.props;return (<div className="comment-list-compenent"><label>评论列表</label><ul className="list-group mb-3">{comments.map((comment, index) =><likey={index}className="list-group-item"onClick = {this.handleDelete}index = {index}>{comment}</li>)}</ul></div>)}

DeleteItem(index){

const list = [...this.state.comments];

list.splice(index, 1);

this.setState({

comments: list //如果key和值是一样的直接写一个就行了

});

}

提问者：慕圣0488818 2019-02-18 22:11

个回答

qq_慕斯卡2406361

2019-10-11 19:35:08

这里有一个很关键的地方需要注意。子组件纯函数是没有this 的，所以通过
```
this.props.XXX
```
是无法调用的。正确的方法应该是在子组件纯函数的头部引入父组件的：函数名、参数变量，如下：
```
const CommentList = ({comments,onDeleteThis}) => {}
```
这个时候，才能在子组件的纯函数内使用：
```
comments,onDeleteThis
```
0

Dorrrri: 2019-03-06 22:12:03

你这没有把index传出去啊，可以用箭头函数

onClick={()=>{this.props.deleteComment(index)}}

App.js中

<CommentList
    comments={comments}
    deleteComment={this.deleteComment}
/>

deleteComment(index){
  let newComments=this.state.comments;
  newComments.splice(index,1);
  this.setState({
    comments:newComments
  })
}