问答详情
源自:4-2 留言本实例编码

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

1、添加删除按钮

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

https://img.mukewang.com/5c08e0430001a79d07300534.jpg

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

https://img1.mukewang.com/5c08e05f0001c88e06750093.jpg

https://img.mukewang.com/5c08e05f0001a9c003020076.jpg

2、清空评论

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

https://img3.mukewang.com/5c08e0bd0001a30904010099.jpg


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

https://img4.mukewang.com/5c08e14f0001eb8f07980441.jpg

提问者:秋夜月moon 2018-12-06 16:42

个回答

  • qq_慕移动8312823
    2019-01-07 20:49:16

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

  • 小风筝sunshine
    2018-12-21 16:16:00

    为什么我这样会报错https://img1.mukewang.com/5c1ca0ec0001e12f05480138.jpg

    我的代码是

    CommentList:

    https://img1.mukewang.com/5c1ca11a000124a010030468.jpg

    app.js

    https://img2.mukewang.com/5c1ca13d000168b308960504.jpg


  • 秋夜月moon
    2018-12-07 14:18:29

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

  • 秋夜月moon
    2018-12-06 22:06:40

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

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


  • 库米花
    2018-12-06 20:47:57

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

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

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