亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

添加刪除按鈕以及清空某條評論的實現

1、添加刪除按鈕

????在CommentList里面,comments遍歷的時候,返回一個li和一個button,button添加點擊事件,點擊的時候傳入index參數,調用this.props.onDeleteComment方法,刪除對應的評論

https://img1.sycdn.imooc.com//5c08e0430001a79d07300534.jpg

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

https://img1.sycdn.imooc.com//5c08e05f0001c88e06750093.jpg

https://img1.sycdn.imooc.com//5c08e05f0001a9c003020076.jpg

2、清空評論

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

https://img1.sycdn.imooc.com//5c08e0bd0001a30904010099.jpg


以上代碼目前自己運行正常,如有可改進之處,請老師同學指正

https://img1.sycdn.imooc.com//5c08e14f0001eb8f07980441.jpg

正在回答

5 回答

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

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

為什么我這樣會報錯https://img1.sycdn.imooc.com//5c1ca0ec0001e12f05480138.jpg

我的代碼是

CommentList:

https://img1.sycdn.imooc.com//5c1ca11a000124a010030468.jpg

app.js

https://img1.sycdn.imooc.com//5c1ca13d000168b308960504.jpg


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

恩,兩個都很好,filter寫起來更方便;但是如果我們現在有一萬條評論,而只是刪除其中一條,那么這時候可能splice更好吧,因為不用把整個數組遍歷一遍,畢竟每次只點擊一個刪除按鈕。 都是我個人見解哈 :D?

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

你好,第一點我試了,有bug,直接不顯示任何評論內容;第二點我綁定了的,只是沒貼出來~~;第三點,我也試了下,代碼如下,但是也有bug,點擊一個刪除,會刪除多條評論,不知道你運行的時候有沒有出現呢

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


0 回復 有任何疑惑可以回復我~
#1

庫米花

試一下 const comments = [...this.state.comments]; comments.splice(index, 1); this.setState({comments}); 因為splice方法返回的是被刪除的元素
2018-12-06 回復 有任何疑惑可以回復我~
#2

秋夜月moon 提問者 回復 庫米花

嗯,這個是可以的,從語義上來說更好一點
2018-12-07 回復 有任何疑惑可以回復我~
#3

張軒 回復 秋夜月moon 提問者

直接使用 數組上面的 filter 方法豈不是更妙? 語義上更清楚 就是 要 過濾掉不要的條目
2018-12-07 回復 有任何疑惑可以回復我~
#4

秋夜月moon 提問者 回復 張軒

恩,兩個都很好,filter寫起來更方便;但是如果我們現在有一萬條評論,而只是刪除其中一條,那么這時候可能splice更好吧,因為不用把整個數組遍歷一遍,畢竟每次只點擊一個刪除按鈕。 都是我個人見解哈 :D
2018-12-07 回復 有任何疑惑可以回復我~
查看1條回復

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

constructor方法里面最好對this.props.onDeleteComment方法綁定this

刪除數組操作在已有index時可以使用splice方法

1 回復 有任何疑惑可以回復我~
#1

秋夜月moon 提問者

你好,第一點我試了,有bug,直接不顯示任何評論內容;第二點我綁定了的,只是沒貼出來~~;第三點,我也試了下,代碼如下,但是也有bug,點擊一個刪除,會刪除多條評論,不知道你運行的時候有沒有出現呢 comments:this.state.comments.splice(deleteIndex,1)
2018-12-06 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消

添加刪除按鈕以及清空某條評論的實現

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號