button onclick回调函数自动出发说明

一、handleClick 是普通函数：

  handleClick(params?: any) {
    console.log('1000101010101010100');
    console.log(params);
    console.log(this)
  }

  onClick={this.handleClick}
    // 正确，但是无法传值
  onClick={this.handleClick()}
    // 在handleClick(): any，即声明返回值any 时，不需要 this.handleClick = this.handleClick.bind(this)，似乎能正确使用，能获取到 this；
    // 在handleClick() 不设置 : any 时，不管是否增加 this.handleClick = this.handleClick.bind(this)，都是报错，界面无法显示。
  onClick={this.handleClick.bind(this, 12)}
    // 正确，不需要 this.handleClick = this.handleClick.bind(this)，能获取this，能获取参数。
  onClick={() => this.handleClick}
    // 无效且无报错，即无法触发
  onClick={() => { this.handleClick }}
    // 无效且无报错，即无法触发
  onClick={() => this.handleClick()}
    // 正确，不需要 this.handleClick = this.handleClick.bind(this)，能获取this，能获取参数。
  onClick={() => { this.handleClick() }}
    // 正确，能获取this，能获取参数。

二、handleClick 是箭头函数
PS：箭头函数皆不需要 this.handleClick = this.handleClick.bind(this)：

  handleClick = (params?: any) => {
    console.log('1000101010101010100');
    console.log(params);
    console.log(this)
  }

  onClick={this.handleClick}
    // 正确，但是无法传值
  onClick={this.handleClick()}
    // 在handleClick(): any，即声明返回值any 时，页面渲染时，自动触发onClick，且onClick点击失效；
    // 在handleClick() 不设置 : any 时，报错，界面无法显示。
  onClick={() => this.handleClick}
    // 无效且无报错，即无法触发
  onClick={() => { this.handleClick }}
    // 无效且无报错，即无法触发
  onClick={() => this.handleClick()}
    // 正确，能获取this，能获取参数。
  onClick={() => { this.handleClick() }}
    // 正确，能获取this，能获取参数。

原文链接：https://blog.csdn.net/BetterGG/article/details/119324277