你寫(xiě)的很認(rèn)真。點(diǎn)贊！ 有幾點(diǎn)可以改進(jìn)，1 刪除的回調(diào)函數(shù)也許不需要傳入 e 這個(gè)event object，直接把 index 傳入豈不是更好？ 2 在 deleteComment 方法中，你選用了 splice 來(lái)刪除，splice 是個(gè) mutable 的方法，當(dāng)然也沒(méi)問(wèn)題，也可以試試用 數(shù)組上面的 filter 方法，這個(gè)函數(shù)是 immtuable 的，而且更好理解。3 既然 clickHandler 里面只有一行，是不是可以試試直接用箭頭函數(shù)作為回調(diào)？ 例如 onClick={(e)=> { .... }}

清空操作可以試試在提交的時(shí)候進(jìn)行，也就是在handleSubmit()方法中，添加

this.textInput.value?=?''

emmmm......我覺(jué)得不用這樣的，加一個(gè)函數(shù)

componentDidUpdate(prevProps,?prevState,?snapshot)?{
????document.getElementById('comment').value?=?""
}

剛問(wèn)完發(fā)現(xiàn)是老師留的作業(yè)……那我就自問(wèn)自答一下吧：

在CommentBox.js里的handleSubmit里加上一句：?

this.textInput.value=""

即可

加刪除按鈕比較麻煩點(diǎn)，CommentList.js文件中，把ul標(biāo)簽修改如下：

<ul?className="list-group?mb-3">
{????
????this.props.comments.map((comment,?index)?=>????????
????????<li?key={index}?className="list-group-item">{comment}
????????<button
????????????type="button"
????????????className="btn?btn-danger?btn-sm"
????????????data-index={index}
????????????onClick={this.clickHandler}
?????????>
?????????刪除
?????????</button>
?????????</li>
?????)
}
</ul>

同時(shí)加入clickHandler方法

clickHandler(e)?{
????this.props.onDeleteComment(e)
}

最后，在App.js里，首先把CommentList標(biāo)簽加入onDeleteComment屬性

<CommentList?comments={comments}?onDeleteComment={this.deleteComment}?/>

再加入deleteComment方法：

deleteComment(e)?{
????const?index?=?e.target.getAttribute("data-index");
????let?newComments?=?this.state.comments
????newComments.splice(index,?1)
????this.setState({
????????comments:?newComments
????})
}

我在刪除按鈕上加了一個(gè)data-index屬性用來(lái)傳遞comment的index，不確定好不好，也不知道有沒(méi)有更好的方法。歡迎大家討論，也請(qǐng)老師指點(diǎn)。