title: Using React's 'ref' attribute with Material-UI
body: <p>I'm trying to access input data using React's "ref" attribute on a TextField in Material-UI. There doesn't seem to be an easy way of doing this via the 'inputRef' or 'inputProps'.</p>
  
  <p>The below sample shows the use of  inputProps on line 26. Assigning the name of the TextField to the 'ref' property does not appear to produce a valid object.</p>
  
  <p>With the “inputRef”, which according the <a href="https://material-ui-next.com/api/text-field/" rel="noreferrer">Material-ui</a> docs forces the use of a function, attempting to pass the field data in as an attribute also doesn't work. Ex: (txt => this.name = txt)</p>
  
  <p>Has anyone found a solution?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class MediaForm extends Component {
    constructor (props) {
      super(props)
      this.state = {}
      this.handleSubmit = this.handleSubmit.bind(this)
    }
  
    handleSubmit (e) {
      const { title, colour } = this.refs
      e.preventDefault()
      window.alert(`New colour: ${title.value} ${colour.value}`)
    }
  
    render () {
      const { classes } = this.props
      return (
        &lt;form className={classes.root}
          onSubmit={this.handleSubmit}&gt;
          &lt;div className={classes.field}&gt;
            &lt;TextField
              name='title'
              type='text'
              label='Title'
              placeholder='Movie title...'
              autoFocus
              inputProps={{ref: this.name}}
              required /&gt;
          &lt;/div&gt;
          &lt;div className={classes.field}&gt;
            &lt;Tooltip title='Add a colour the reflects the mood of the film'&gt;
              &lt;TextField
                name='colour'
                type='color'
                label='Mood'
                inputProps={{ref: this.name}}
                required /&gt;
            &lt;/Tooltip&gt;
          &lt;/div&gt;
          &lt;Button
            variant='raised'
            color='primary'
            className={classes.button}&gt;
            ADD
          &lt;/Button&gt;
        &lt;/form&gt;
      )
    }
  }
  
  MediaForm.propTypes = {
    classes: PropTypes.object.isRequired
  }
  
  export default withRoot(withStyles(styles)(MediaForm))</code></pre>
  </div>
  </div>
  </p>