怎么把commentLists中的index传递到APP.js中-慕课网

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

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

慕圣0488818

2019-02-18 22:11

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和值是一样的直接写一个就行了

});

}

写回答关注

2回答

qq_慕斯卡2406361

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

0 0

基于实例的 React16 傻瓜课程

通过一系列简单有趣的例子，让你了解 React16 的基本概念和新特性

22372 学习 · 106 问题

查看课程

相似问题

子组件怎么向父组件传递index

回答 2

能否获取onSubmit event中的传递的值？

回答 1

app.js中录入 constructor报错，请问是什么原因？

回答 3

为什么只在App.js中实现本例子好用，新建其他的JS文件中不能用？

回答 2

react脚手架工具创建出来的my-project里面 App.js 语法跟视频中不一样

回答 2

打开慕课网App查看更多内容