React 事件函数传值问题

github地址:react学习案例，问题的issue位置

发现案例中存在以下问题：

• /comment案例中

  deleteComment = index => {
    const list = this.state.list
    list.splice(index, 1)
    this.setState({ list })
  }
  // 省略部分代码
  this.state.list.map((item, index) => (
    <Fragment key={index}>
      <dt>{item.name}说：</dt>
      <dd>{item.content} --- <button onClick={this.deleteComment}>删除评论</button></dd>
    </Fragment>
  ))
  

  这里既没有使用bind传值，箭头函数传值也不对。

  因为删除评论成功了的，就没有注意，其实删除了的不是想要的index，index根本不对。

• 正在写的/comment-plus案例中使用上面的方式后，发现了这个问题。

  但是：出现了新的理解错误

  this.props.comments.map((item, index) => (
    <li key={index}>
      <p className='name'>{item.name}说：</p>
      <p className='content'>{item.content}</p>
      <div className='delete' onClick={(index) => this.handleDelete(index)}>删除</div>
    </li>
  ))
  

  在箭头函数传值时，index传去的是一个Class，而不是所需的索引。

  寻找原因：

  this.props.comments.map((item, index) => {
    console.log(index)
    return (
      <li key={index}>
        <p className='name'>{item.name}说：</p>
        <p className='content'>{item.content}</p>
        <div className='delete' onClick={(index) => {
          console.log(index)
          console.log(index.target)
          // this.handleDelete(index)
        }}>删除</div>
      </li>
    )
  })
  

  结果：

  

  应该改为这样：

  <div className='delete' onClick={() => this.handleDelete(index)}>删除</div>
  

在学习过程中还需要更加细心。

版权声明：

Anand's Blog文章皆为站长Anand Zhang原创内容，转载请注明出处。

包括商业转载在内，注明下方要求的文章出处信息即可，无需联系站长授权。

请尊重他人劳动成果，用爱发电十分不易，谢谢！

请注明出处：

本文出自：Anand's Blog

本文永久链接：https://anandzhang.com/posts/frontend/7