React中方法的this绑定

第一种 在组件（类）的constructor中绑定this

class Demo extends Component {
  constructor(this) {
    super(this)
    this.state = { value: 0 }
    this.handleDivClick = this.handleDivClick.bind(this)
  }

  handleDivClick() {
    this.setState((state, props) => ({ value: state.value + 1 }))
  }

  render() {
    const { value } = this.state
    return <div onClick={this.handleDivClick}>{value}</div>
  }
}

 

第二种 使用 public class fields 语法（实验性质）

class Demo extends Component {
  ...

  handleClick = () => {
    console.log('"this" is: ', this)
  }

  render() {
    return <button onClick={this.handleClick}>Get log</button>
  }
}

 关于类字段语法(参考Babel官网)：

class Book {
  // Property initializer syntax (属性初始化器语法)
  instanceProperty = 'book'
  boundFunction = () => {
    return this.instanceProperty
  }

  // Static class properties (静态属性)
  static staticProperty = 'pencil'
  static staticFunction = function() {
    return Bork.staticProperty
  }
}

let myBork = new Bork

// Property initializers are not on the prototype.
console.log(myBork.__proto__.boundFunction) // undefined

// Bound functions are bound to the class instance.
console.log(myBork.boundFunction.call(undefined)) // 'bork'

// Static function exists on the class. 
console.log(Bork.staticFunction()) // 'pencil'

 

第三种 使用箭头函数

class Demo extends Component {
  ...

  handleClick() {
    // ...
  }

  render() {
    return (
      <button onClick={e => this.handleClick(e)}>Click me</button>
    )
  }
}

 

绑定事件的传参

// 1.
<button onClick={e => this.handleClick(e, id)}>Click</button>

// 2. 
<button onClick={this.handleClick.bind(this, id)}>Click</button>