                        课程
                    
                        /前端开发
                        
                            /React.JS
                        
                        /基于实例的 React16 傻瓜课程

怎么把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

源自：基于实例的 React16 傻瓜课程 4-2

关注问题我要回答

1037

操作

收起

2 回答

qq_慕斯卡2406361
2019-10-11

这里有一个很关键的地方需要注意。子组件纯函数是没有this 的，所以通过

this.props.XXX

是无法调用的。正确的方法应该是在子组件纯函数的头部引入父组件的：函数名、参数变量，如下：

const CommentList = ({comments,onDeleteThis}) => {}

这个时候，才能在子组件的纯函数内使用：

comments,onDeleteThis

0 回复有任何疑惑可以回复我~

收起回答

Dorrrri
2019-03-06

你这没有把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/150

提交

取消

基于实例的 React16 傻瓜课程

参与学习 22387 人
解答问题 106 个

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

进入课程

本课相似问答

2 回答子组件怎么向父组件传递index

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

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

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

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

搜索更多本课相关问答

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

我要回答关注问题

热搜

最近搜索清空

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

2 回答

本课相似问答

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