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

添加删除按钮以及清空某条评论的实现

1、添加删除按钮

在CommentList里面，comments遍历的时候，返回一个li和一个button，button添加点击事件，点击的时候传入index参数，调用this.props.onDeleteComment方法，删除对应的评论

app.js里面，注意绑定this.deletecomment

2、清空评论

在CommentBox中，onSubmit方法里面直接清空，一旦提交就可以清空了

以上代码目前自己运行正常，如有可改进之处，请老师同学指正

秋夜月moon

2018-12-06

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

关注问题我要回答

1153

操作

收起

5 回答

qq_慕移动8312823
2019-01-07

为啥我的button和li不在同一行？

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

收起回答

小风筝sunshine
2018-12-21

为什么我这样会报错

我的代码是

CommentList：

app.js

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

收起回答

秋夜月moon 提问者
2018-12-07

恩，两个都很好，filter写起来更方便；但是如果我们现在有一万条评论，而只是删除其中一条，那么这时候可能splice更好吧，因为不用把整个数组遍历一遍，毕竟每次只点击一个删除按钮。都是我个人见解哈 :D

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

收起回答

秋夜月moon 提问者
2018-12-06

你好，第一点我试了，有bug，直接不显示任何评论内容；第二点我绑定了的，只是没贴出来~~；第三点，我也试了下，代码如下，但是也有bug，点击一个删除，会删除多条评论，不知道你运行的时候有没有出现呢

comments:this.state.comments.splice(deleteIndex,1)

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

收起回答

库米花

试一下 const comments = [...this.state.comments]; comments.splice(index, 1); this.setState({comments}); 因为splice方法返回的是被删除的元素

2018-12-06 回复有任何疑惑可以回复我~

秋夜月moon 提问者回复库米花

嗯，这个是可以的，从语义上来说更好一点

2018-12-07 回复有任何疑惑可以回复我~

张轩回复秋夜月moon 提问者

直接使用数组上面的 filter 方法岂不是更妙？语义上更清楚就是要过滤掉不要的条目

2018-12-07 回复有任何疑惑可以回复我~

查看1条回复

库米花
2018-12-06

可以直接写onClick={this.props.onDeleteComment(index)}

constructor方法里面最好对this.props.onDeleteComment方法绑定this

删除数组操作在已有index时可以使用splice方法

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

收起回答

秋夜月moon 提问者

你好，第一点我试了，有bug，直接不显示任何评论内容；第二点我绑定了的，只是没贴出来~~；第三点，我也试了下，代码如下，但是也有bug，点击一个删除，会删除多条评论，不知道你运行的时候有没有出现呢 comments:this.state.comments.splice(deleteIndex,1)

2018-12-06 回复有任何疑惑可以回复我~

0/150

提交

取消

基于实例的 React16 傻瓜课程

参与学习 22460 人
解答问题 110 个

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

进入课程

本课相似问答

1 回答添加删除按钮错误TypeError: Cannot read property 'props' of undefined

4 回答添加了新的replay之后，怎样把input里的内容清空？

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

1 回答非受控组件的input，如何清空啊？

1 回答样式按钮是用来干啥的，感觉多余的，

搜索更多本课相关问答

添加删除按钮以及清空某条评论的实现

我要回答关注问题

热搜

最近搜索清空

添加删除按钮以及清空某条评论的实现

5 回答

本课相似问答

添加删除按钮以及清空某条评论的实现