React 页面加载后自动执行onClick事件


 <Button className={placeTime.length > 1 ? styles.delBtn : styles.delFirst} 
                  onClick={this.onRemove (index)}>
  <Icon type={'delete'}/>删除
</Button>
)


 onRemove = (index) => {
    const { placeTime } = this.state
    console.log(placeTime, index);
    placeTime.splice(index, 1)
    this.setState({
      placeTime
    })
  }
---------------------

  

删除按钮绑定的 onRemove点击事件,想要带着参数index去执行,但这种操作是不允许的,刚好在事件函数中也有setState操作,这样就会陷入到 死循环中,不停的改变state,render()又不停的被执行。

解决方案

// 一
 <Button className={placeTime.length > 1 ? styles.delBtn : styles.delFirst} 
                  onClick={()=>this.onRemove (index)}>
  <Icon type={'delete'}/>删除
</Button>
// 二
 <Button className={placeTime.length > 1 ? styles.delBtn : styles.delFirst} 
                  onClick={this.onRemove .bind(this,index)}>
      <Icon type={'delete'}/>删除
    </Button>

  


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM