title: Unable to retrieve the input field of material UI using refs in react js
body: <p>I am developing a Web application using React JS + Material UI core. Now, I am building a form with the material ui control. Now, I am trying to retrieve the input field value (TextField) using refs of React. It is always saying undefined.</p>
  
  <p>This is my component</p>
  
  <pre><code>class CreateEventComponent extends React.Component{
  
      constructor(props)
      {
          super(props)
  
  
      }
  
  
      submitCreateEventForm(e)
      {
          e.preventDefault();
          alert(this.refs.name.input.value)
      }
  
      render()
      {
          return (
              &lt;MuiThemeProvider&gt;
              &lt;div className={scss['page-container']}&gt;
              &lt;Grid
              spacing={16}
              container&gt;
                  &lt;Grid item md={12}&gt;
                      &lt;Card&gt;
                      &lt;CardContent&gt;
                          &lt;form onSubmit={this.submitCreateEventForm.bind(this)}&gt;
                          &lt;div&gt;
                              &lt;TextField
                              ref="name"
                              className={scss['form-control']}
                              name="name"
                              label="Name" /&gt;
                          &lt;/div&gt;
  
                          &lt;div&gt;
                          &lt;Grid&gt;
                          &lt;Button type="submit" color="primary" variant="raised"&gt;Save&lt;/Button&gt;
                          &lt;/Grid&gt;
                          &lt;/div&gt;
                          &lt;/form&gt;
                      &lt;/CardContent&gt;
                      &lt;/Card&gt;
                  &lt;/Grid&gt;
              &lt;/Grid&gt;
              &lt;/div&gt;
              &lt;/MuiThemeProvider&gt;
          )
      }
  
  }
  
  function mapStateToProps(state)
  {
      return {
  
      };
  }
  
  function matchDispatchToProps(dispatch)
  {
      return bindActionCreators({
  
      }, dispatch);
  }
  
  const enhance = compose(withWidth(), withStyles(themeStyles, { withTheme: true }), connect(mapStateToProps, matchDispatchToProps))
  export default enhance(CreateEventComponent);
  </code></pre>
  
  <p>As you can see, when form submits, I am trying to alert the name input field using refs. But it is always showing "undefined". I tried using this to fetch the value of TextField.</p>
  
  <pre><code>alert(this.refs.name.value)
  </code></pre>
  
  <p>It throws error saying name is undefined. So, how can I fetch the value of TextField using Ref?</p>
  
  <p>I used this way as well. </p>
  
  <p>I create ref in the constructor</p>
  
  <pre><code> constructor(props)
      {
          super(props)
  
          this.nameRef = React.createRef();
      }
  </code></pre>
  
  <p>Then set the ref for the TextField</p>
  
  <pre><code>&lt;TextField
                              ref={this.nameRef}
                              className={scss['form-control']}
                              name="name"
                              label="Name" /&gt;
  </code></pre>
  
  <p>Then retrieve the values in this ways.</p>
  
  <pre><code>this.nameRef.value
  this.nameRef.input.value
  </code></pre>
  
  <p>It is giving me the same error as well.</p>