title: How to properly bind onChange callback to 'this' with ReactJS, Redux, and ES2015?
body: <p>I'm learning ReactJS and Redux, and I cant figure out how to get access to my TextField instance while binding it's onChange callback to <code>this</code>.</p>
  
  <p>(I'm using <a href="https://github.com/callemall/material-ui" rel="noreferrer">material-ui</a> for this example, but I would encounter quite the same problem without it)</p>
  
  <pre class="lang-js prettyprint-override"><code>import React, {Component} from 'react';
  import { connect } from 'react-redux';
  import { setDataValue } from './actions/data';
  import TextField from 'material-ui/lib/text-field';
  import Paper from 'material-ui/lib/paper';
  
  export class DataInput extends Component {
      constructor(props){
          super(props);
      }
  
      handleTextChange() {
          this.props.setDataValue(document.getElementById('myField').value);
      }
  
      render(){
          return (
              &lt;Paper style={{
                  width: '300px',
                  margin: '10px',
                  padding: '10px'
              }}&gt;
                  &lt;TextField 
                    id='myField'
                    defaultValue={this.props.data.value}
                    onChange={this.handleTextChange.bind(this)} /&gt;
              &lt;/Paper&gt;
          );
      }
  }
  
  export default connect(
    (state) =&gt; ({data: state.data}),
    {setDataValue}
  )(DataInput);
  </code></pre>
  
  <p>I'm using a solution that I find ugly (not reusable => not very 'component-friendly') by setting an <code>id</code> on my TextField, and accessing its value with <code>document.getElementById('myField').value</code></p>
  
  <p>How could I get rid of this <code>id</code>, and accessing it with something like <code>textFieldRef.value</code> inside my callback ?</p>
  
  <p>I tried without <code>.bind(this)</code>, which gives me access to my TextField instance through <code>this</code>, but I can no longer access my <code>this.props.setDataValue()</code> function since <code>this</code> isn't binded to my class context.</p>
  
  <p>Thank you !</p>