事件绑定的四种写法

import React, { Component } from 'react'

export default class eventBindComponent extends Component {
  render() {
    return (
      <div>
        <input></input>
        <button onClick={() => {
          console.log('hhh')   // 如果处理逻辑过多，不推荐这种写法 
        }}>add</button>
        <button onClick={ this.add2 }>add2</button>
        <button onClick={ this.add3 }>add3</button>
        <button onClick={ () => { // 比较推荐
          this.add4()
        } }>add4</button>
      </div>
    )
  }
  add2() {
    console.log('kkk')
  }
  
  add3 = () => {
    console.log('lll')
  }
  
  add4 = () => {
    console.log('www')
  }
}

分别点击实现效果

this 指向问题

import React, { Component } from 'react'

export default class eventBindComponent extends Component {
  a = `this指向`

  render() {
    return (
      <div>
        <button onClick={() => {
          console.log( this.a )
        }}>add</button>
        <button onClick={ this.add2.bind(this) }>add2</button>{/* 不推荐 */}
        <button onClick={ this.add3 }>add3</button>
        <button onClick={ () => { // 比较推荐
          this.add4()
        } }>add4</button>
      </div>
    )
  }
  add2() {
    console.log( this.a, this )
  }
  
  add3 = () => {
    console.log('lll')
  }
  
  add4 = () => {
    console.log('www')
  }
}

this 指向补充

call、apply、bind 作用及区别

• 作用
  • 都是改变this指向的
  • 第一个参数都是this要指向的对象
  • 都可以利用后续参数传参
• 区别
  • call和bind的参数是依次传参，一一对应的
  • 但apply只有两个参数，第二个参数为[数组]
  • call和apply都是对函数进行直接调用，而bind方法返回的仍是一个函数

六种函数的this指向

this指向