react 事件绑定程序中的this

要想正确地获得react事件绑定程序中的this，有以下几种方法：
方法一：

import React from 'react'

class TodoList extends React.Component {
  constructor(props) {
    super(props)
    this.handleButtonClick = this.handleButtonClick.bind(this)
  }
  handleButtonClick () {
    console.log('click', this);
  }
  render () {
    return (
      <div>
        <section>
          <input type="text" />
          <button onClick={this.handleButtonClick}>add</button>
        </section>
        <ul>
          <li>learn react</li>
          <li>learn vue</li>
        </ul>
      </div>
    )
  }
}

export default TodoList

方法二：

import React from 'react'

class TodoList extends React.Component {
  constructor(props) {
    super(props)
  }
  handleButtonClick () {
    console.log('click', this);
  }
  render () {
    return (
      <div>
        <section>
          <input type="text" />
          <button onClick={this.handleButtonClick.bind(this)}>add</button>
        </section>
        <ul>
          <li>learn react</li>
          <li>learn vue</li>
        </ul>
      </div>
    )
  }
}

export default TodoList

方法三：

import React from 'react'

class TodoList extends React.Component {
  constructor(props) {
    super(props)
  }
  handleButtonClick () {
    console.log('click', this);
  }
  render () {
    return (
      <div>
        <section>
          <input type="text" />
          <button onClick={() => this.handleButtonClick()}>add</button>
        </section>
        <ul>
          <li>learn react</li>
          <li>learn vue</li>
        </ul>
      </div>
    )
  }
}

export default TodoList