How to get Material-UI's <TextField/> to return correctly with ref='' like <input/> in ReactJS?

I would suggest this approach:

Set up your textfield with a value and onChange function that are hooked into redux itself, where the onChange function just updates the value.

So you'd have something like this :

 <TextField value={this.props.textFieldValue} onChange={this.props.textFieldChange} 

Where the textFieldChange is an action that simply updates the textFieldValue. Most forms in redux will work something like this. Keep in mind the names i made up for those props and action are just for example. If you have a big form you might want to consider have part of the state tree dedicated to the form itself where you have :

state: { form: { textField: ...your textfield value here, name: ..., whateverElse: ... } }; 

I like doing this with redux because I can make that architect form part of the state to look like the json payload of wherever I'm sending it to, so there I can just send the form went I want to send it.

Anyways, back to this example. When you click your handleClick now. All you need to do is this to get the value:

handleClick(event) { console.log(this.props.textFieldValue.trim()); } 

Because the textfield is updated with every change, you always have access to it in your state. This also gives you flexibility over the refs approach, because if you use refs you will have a lot harder of a time getting access to that form in other components. With this approach, all the information is on your state so you can access it anytime, as long as you manage your props.

You should use the onChange={} to get the value:

_onChange = (e) => { console.log(e.target.value); } <TextField onChange={this._onChange} /> 

Here's a better solution than using onchange event, we get directly the value of the input created by material-ui textField :

 create(e) { e.preventDefault(); let name = this.refs.inputText.input.value; alert(name); } constructor(){ super(); this.create = this.create.bind(this); } render() { return ( <form> <TextField ref="inputText" hintText="" floatingLabelText="Your name" /><br/> <RaisedButton label="Create" onClick={this.create} primary={true} /> </form> )} 

hope this helps.