react 之 将函数绑定到组件实例

1. 在Constructor中绑定（ES2015）
2. 类属性（第三阶段提案）
3. 在Render中使用bind绑定
4. 在Render中使用箭头函数

在Constructor中绑定（ES2015）

class Foo extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log('Click happened');
  }
  render() {
    return this.handleClick}>Click Me;
  }
}

类属性（第三阶段提案）

class Foo extends Component {
  // Note: this syntax is experimental and not standardized yet.
  handleClick = () => {
    console.log('Click happened');
  }
  render() {
    return Click Me;
  }
}

在Render中使用bind绑定

class Foo extends Component {
  handleClick() {
    console.log('Click happened');
  }
  render() {
    return this.handleClick.bind(this)}>Click Me;
  }
}

在Render中使用箭头函数

class Foo extends Component {
  handleClick() {
    console.log('Click happened');
  }
  render() {
    return  this.handleClick()}>Click Me;
  }
}