Get material-ui <TextField/> value in react

help
1

I am following material-ui instructions form http://www.material-ui.com/#/ . but the problem is getting htlm elements value in react.
this is text field component < TextField ref=“txtTo”/>.
trying to get value from it like

  • const vdate=this.refs.txtDate.getValue();
  • const vReason=ReactDOM.findDOMNode(this.refs.txtDate).value; .</li? but when i call from DOM its return undefined. they refereed getValue(). but I have got error on console, "getValue() not a function. how to resolve it?
1 Like
2

Check the API doc and example code, you should use the callback function to get what you need.

3

I’m having the same problem and not find anything in the documentation about this problem or how to apply

4

I removed formsy-material-ui and formsy-react in the npm, and worked!
i am get value that const vdate=this.refs.txtDate.getValue();

:wink:

1 Like
5

From break changes, you should manage value with state

<TextField 
  value={this.state.name}
  onChange={e => this.setState({ name: e.target.value })}
/>
1 Like
6

Using refs is not encouraged anymore. The better way is to either use a state manager like redux or manage your own state. Change your state on events happening in TextField like onChange or onBlur etc.

7

Can you provide your code? I am trying to record values using refs as well but don’t know where to start. Thank you!

8

I had a serious problem with this approach. I passed a value from LocalState and an action to my dumb component through mantra container. The textfield’s value prop was the value from LS, the onChange was the action. The action simply updated the LocalState and an other LocalState for showing error messages. If the user changed the value in the textfield, react fired the action which updated the LS which updated the value of the TF - but because LS is asynchronous, the cursor in the TF jumped to the last position.

You can see a gif here about the problem.

I had to convert the component to a stateful component which updated its internal state to fix this.

9

BTW, the second parameter for the callback function is the value. You can see it in the documentation at the bottom of this page for the “onChange” function signature.

http://www.material-ui.com/#/components/text-field

<TextField 
  value={this.state.name}
  onChange={(e, newValue) => this.setState({ name: newValue})}
/>
10

are you still working on this? use mobX, it greatly simplifies everything. Let me know if you need a code sample.

Tat