class组件中的事件处理

类组件中的this指向类的实例，在render函数中可以通过this访问该类的实例的属性。

xxxxxxxxxx
class App extends React.Component{
  onAdd(){
    console.log('点击事件发生了')
  }
  render(){
    return <div>
      <button onClick={this.onAdd}>点击</button>
    </div>
  }
}

提示：

在 JavaScript 中，class 的方法默认不会绑定this

xxxxxxxxxx
class App extends React.Component {
  onSum(num1,num2){
    return num1+num2
  }
  onAdd() {
      //直接在函数内访问this，是访问不到的，为Undefined
    console.log(this)
    this.onSum(1,2)
  }
  render() {
    return <div>
      <button onClick={this.onAdd}>点击</button>
    </div>
  }
}

手动绑定函数中this的指向

• 方法一：在render函数中绑定

  xxxxxxxxxx
  class App extends React.Component {
    onSum(num1,num2){
      return num1+num2
    }
    onAdd() {
        //直接在函数内访问this，是访问不到的
      console.log(this)
      console.log(this.onSum(1,2))
    }
    render() {
      return <div>
        <button onClick={this.onAdd.bind(this)}>点击</button>
      </div>
    }
  }
  

• 方法二：在类的构造函数中绑定

  xxxxxxxxxx
  class App extends React.Component {
    constructor(){  
      super()
        //因为在类的构造函数中也可以访问this
      this.onAdd=this.onAdd.bind(this)
    }
    onSum(num1,num2){
      return num1+num2
    }
    onAdd() {
      console.log(this)
     console.log(this.onSum(1,2)) 
    }
    render() {
      console.log(this)
      return <div>
        <button onClick={this.onAdd}>点击</button>
      </div>
    }
  }
  

• 方法三：使用箭头函数

  xxxxxxxxxx
  class App extends React.Component {
  
    onSum(num1,num2){
      return num1+num2
    }
    onAdd=()=> {
      console.log(this)
     console.log(this.onSum(1,2)) 
    }
    render() {
      console.log(this)
      return <div>
        <button onClick={this.onAdd}>点击</button>
      </div>
    }
  }
  

实时效果反馈

1. 下列哪种事件绑定方式无法获得this：

A <button onClick={ () => this.clickHandle() }>点击</button>

B <button onClick={ this.clickHandle.bind(this) }>点击</button>

C <button onClick={ this.clickHandle }>点击</button>并且在构造函数中this.clickHandle = this.clickHandle.bind(this);

D <button onClick={ this.clickHandle }>点击</button>

答案

1=>D