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>