Material-ui: I can't access value from textField component using refs

[yonidejene]

I have been trying to build a simple form to record user input from the textField component by using a ref but every time I try to reference the ref, I get a null return. Can someone show me how to record a value using refs?

Note: I already implemented a solution using states but ran into problems with pulling in data from containers so I need a solution using refs. Thank you!

Here is my code:

class Form extends React.Component{

  handleSubmit(event){
    event.preventDefault();
    var name = (this.refs.name).value;
    console.log(name);
            if (!name) {
              return;
            }
            // TODO: send request to the server
            (this.refs.name).value = '';
            return;
    }
  render() {
    return (
      <MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}>
        <div>
        <TextField
          ref="name"
          hintText={"Enter Your Name"}
          floatingLabelText={"Name"}
        />
          <RaisedButton type="submit" label="Submit" onClick={this.handleSubmit.bind(this)} />
        </div>
      </MuiThemeProvider>
    )

  }

}

[oliviertassinari]

@yonidej That doesn't look like an issue with this lib. I'm closing it. Would be better to post your question on StackOverflow, the answer would help more people.

[THPubs]

I'm also having the same issue and it only happens when using material-ui. @yonidej Did you got an answer from stack overflow?

[THPubs]

Just found the solution to getting the value : http://stackoverflow.com/questions/31446751/how-to-get-password-field-value-in-reacts-material-ui . Any idea how to set the value?

[THPubs]

Also found how to set the value! The method we used earlier email.value won't work. Use this instead email.input.value = ''; (Replace email with the ref name)

[kushal-tech]

Please look at the my answer
https://stackoverflow.com/questions/31446751/how-to-get-password-field-value-in-reacts-material-ui/47329368#47329368

[nickhallph]

This is the top result for searching how to get a value from a mui textfield, so let's just leave it and actually use this post as it was intended, to help people.

[oliviertassinari]

@nickhallph Use the inputRef property or follow our FAQ.