# AutoBinding in React
Just for quicker reference from [here](https://github.com/annamalai-saro/AutoBinding-in-React)

#### 1. ES5 (No class)

```js
var Button = React.createClass({
  handler:function(e){
   ....
  },
  render:function(){
    return (
      <button onClick={this.handler} >
        Click me
      </button>
    );
  }
})
```

#### 2. Using bind syntax
```js
class Button extends React.Component{
    handler(){
     ...
    }
    render(){
       return (
          <button onClick={this.handler.bind(this)} >
            Click me
          </button>
       );
    }

}
```

#### 3. Binding in constructor  
```js
class Button extends React.Component{
    constructor(){
    this.handler = this.handler.bind(this) 
    }
    handler(){
     ...
    }
    render(){
       return (
          <button onClick={this.handler} >
            Click me
          </button>
       );
    }

}
```
#### 4. Fat arrows  
```js
class Button extends React.Component{
    handler = ()=>{
     ...
    }
    render(){
       return (
          <button onClick={this.handler} >
            Click me
          </button>
       );
    }

}
```

#### 5. ES7 Bind syntax  in constructor
```js
class Button extends React.Component{
    constructor(){
    this.handler = ::this.handler;
    }
    handler(){
     ...
    }
    render(){
       return (
          <button onClick={this.handler} >
            Click me
          </button>
       );
    }

}
```
#### 6. ES7 Bind syntax inline
```js
class Button extends React.Component{
    handler(){
     ...
    }
    render(){
       return (
          <button onClick={::this.handler} >
            Click me
          </button>
       );
    }

}
```