1.click事件写法

写法一：

//事件
 add = ()=>{
     console.log("最近我的公孙离被吊打")
 }
 //正确使用
  <div onClick={ ()=>{ this.add() } }> 抓娃娃 </div>
  或
  <div onClick={ this.add }> +100 </div >

写法二：

//事件
reduce(){
     console.log("最近我的公孙离被吊打")
}
//正确使用
<div onClick={ ()=>{ this.reduce() } }> 扔娃娃</div> 只能这样写，切记切记。

//错误使用，感受痛苦吧（this is undefined）
<div onClick={ this.reduce }> -100 </div >  这个是错的，是错的，是错的

2.click事件写法（获取事件对象e）

写法一：

//事件
reduce(e){
    console.log(e)
}
//使用
<div onClick={ (e)=>{ this.reduce(e) } }> 扔娃娃 </div>

//错误使用，感受痛苦吧（报错）
<div onClick={ ()=>{ this.reduce() } }>抓娃娃</div>

写法二：

//事件
  add = (e)=>{
    console.log(e)
  }
//正确使用
<div onClick={ this.add }> +100 </div >
或
<div onClick={ (e)=>{ this.add(e) } }>抓娃娃</div>

//错误使用，感受痛苦吧（e is undefined）
<div onClick={ ()=>{ this.add() } }>抓娃娃</div>
或
<div onClick={ this.add(e) }> +100 </div >

1.click事件写法（传参）

写法一：

//事件
reduce(val){
    console.log(val)
}
//使用
<div onClick={()=>{this.reduce("你好")}}>扔娃娃</div>

//错误使用，感受痛苦吧
<div onClick={ this.reduce("你好") } }>扔娃娃</div> //疯狂自动执行，然后报错

写法二：

//事件
  add = (val)=>{
    console.log(val)
  }
//正确使用
<div onClick={ ()=>{ this.add("你好") } }> 抓娃娃 </div> 

//错误使用，感受痛苦吧
<div onClick={ this.add("你好") }> +100 </div > //自动执行1001次

3.click事件写法（获取事件对象e + 传参）

写法一：

//事件
reduce(e,hi){
    console.log(e,hi)
  }
//使用
<div onClick={(e)=>{this.reduce(e,"你好")}}>扔娃娃</div>

写法二：

//事件
  add = (e,hi)=>{
    console.log(e,hi)
  }
//正确使用
<div onClick={(e)=>{this.add(e,"你好")}}>抓娃娃</div>