react事件解析，class,hooks事件传参剖析

class类型的事件剖析

事件不传参

onClick={this.tfn}
<div onClick={this.tfn}>事件不传参</div>

tfn = (e) => {
  console.log('事件不传参');
}

事件传参

1.bind-this

总结：onClick={this.clickfn.bind(this, params)} clickfn(params, this)

<div onClick={this.clickfn.bind(this, 11, 22)}>事件传参-bind.this</div>
clickfn = (a, b, e) => {
  console.log('a, b, e: ', a, b, e);
}

2.方法2

onClick={(e)=>this.fn(params)}

<div onClick={(e)=>this.clickfn2(11, 22)}>事件传参</div>

clickfn2 = (a, b) => {
  console.log('a, b: ', a, b);
}

hooks 事件

去除this, 跟class一样

onClick={fn1}
onClick={fn.bind(this, params)}
onClick={() => fn2(1)}