React,jsx动态绑定事件(This的指向问题和传递参数)

当我们调用react事件的时候，往往会碰到this指向有问题的情况,首先演示一下this的指向问题的解决方法

先定义一个类组件

class Movie extends React.Component{
  constructor(){
    super()
    this.state={
      counter:0
    }
  }
  render() {
    const {counter}  =this.state
    return(
      <div>
       <button onClick={this.btnClick}>按钮1</button>
      </div>
    )
  }
  btnClick(){
    console.log(this.state.counter)
  }
}

ReactDOM.render(
  <Movie/>,document.getElementById('app')
)

这样调用btnClick事件肯定是执行不了的，那怎么解决呢，这里提供四种方法

第一种

   <button onClick={this.btnClick.bind(this)}>按钮1</button>

第二种，在constructor里面定义

  this.state={
      counter:0
    }
    this.btnClick = this.btnClick.bind(this)
    然后就可以这样用了
    <button onClick={this.btnClick}>按钮1</button>

第三种，用箭头函数的方式写事件

 <button onClick={this.btnClick}>按钮1</button>
  btnClick1 = ()=>{
console.log(this.state.counter)
}

第四种，也是最推荐的一种

<button onClick={()=>{this.btnClick()}}>按钮1</button>

直接在button上用箭头函数，为什么最推荐,因为这样的话我们传参很方便

传参的话这样

<button onClick={()=>{this.btnClick(id)}}>按钮1</button>

 btnClick(id){
    console.log(id)
  }

以方便为主，所以推荐这四种写法