React Binding

arrow-function-in-render.js

class TestComponent extends Component() {
  handleClick(evt) {
    console.log(evt)
  }
  
  render() {
    return <button onClick={e => this.handleClick(e)}>Click Me</button>
  }
}

autobind-decorator.js

import { autobind } from 'core-decorators'

@autobind
class TestComponent extends Component() {
  handleClick() {
    console.log(evt)
  }
  
  render() {
    return <button onClick={this.handleClick}>Click Me</button>
  }
}

bind-in-render.js

class TestComponent extends Component() {
  handleClick(evt) {
    console.log(evt)
  }
  
  render() {
    return <button onClick={this.handleClick.bind(this)}>Click Me</button>
  }
}

class-function-arrow-property.js

class TestComponent extends Component() {
  handleClick = (evt) => {
    console.log(evt)
  }
  
  render() {
    return <button onClick={this.handleClick}>Click Me</button>
  }
}

constructor-functional-bind.js

class TestComponent extends Component() {
  constructor(props) {
    super(props)
    this.handleClick = ::this.handleClick
  }
  
  handleClick(evt) {
    console.log(evt)
  }
  
  render() {
    return <button onClick={this.handleClick}>Click Me</button>
  }
}

constructor.js

class TestComponent extends Component() {
  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }
  
  handleClick(evt) {
    console.log(evt)
  }
  
  render() {
    return <button onClick={this.handleClick}>Click Me</button>
  }
}