个回答

• 张轩

  2018-09-18 22:41:57

  你写的很认真。点赞！ 有几点可以改进，1 删除的回调函数也许不需要传入 e 这个event object，直接把 index 传入岂不是更好？ 2 在 deleteComment 方法中，你选用了 splice 来删除，splice 是个 mutable 的方法，当然也没问题，也可以试试用 数组上面的 filter 方法，这个函数是 immtuable 的，而且更好理解。3 既然 clickHandler 里面只有一行，是不是可以试试直接用箭头函数作为回调？ 例如 onClick={(e)=> { .... }}

  1

• 秋夜月moon

  2018-12-06 16:29:36

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

  this.textInput.value = ''

  
  

  0

• qq_长流_0

  2018-12-04 16:37:29

  emmmm......我觉得不用这样的，加一个函数

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

  
  

  0

• 慕前端3151062

  2018-09-18 20:38:00

  刚问完发现是老师留的作业……那我就自问自答一下吧：

  在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，不确定好不好，也不知道有没有更好的方法。欢迎大家讨论，也请老师指点。

  1