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

• Z时代
• 2024-01-10
• 分类：综合

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

以上是 React 页面加载后自动执行onClick事件 的全部内容， 来源链接： utcz.com/z/381815.html