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

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

this.textInput.value?=?''

emmmm......我覺得不用這樣的，加一個函數

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

剛問完發現是老師留的作業……那我就自問自答一下吧：

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

this.textInput.value=""

即可

加刪除按鈕比較麻煩點，CommentList.js文件中，把ul標簽修改如下：

<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>

同時加入clickHandler方法

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

最后，在App.js里，首先把CommentList標簽加入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
????})
}

我在刪除按鈕上加了一個data-index屬性用來傳遞comment的index，不確定好不好，也不知道有沒有更好的方法。歡迎大家討論，也請老師指點。