Material UI component reference does not work
javascript, material-ui, reactjs
Solution
In onChange method, you don't need to use `ref` to access value of same textfield, material-ui TextField pass 2 parameters in onChange method:
event, value
So you can write it like this without using ref:
<TextField ... onChange={(e, value) => this.handleChanges(value) }/>
As per DOC:
onChange: function
Callback function that is fired when the textfield's value changes.
Signature: function(event: object, newValue: string) => void
event: Change event targeting the text field.
newValue: The new value of the text field.
Problem
I am building a little chat application.i have used Material UI TextField to input user message. but i can't refer it. I read about this. they said that they do not support for `refs`. this is my code. and it works. ``` class App extends Component { constructor() { super(); this.state = { q: "default" }; } handleChanges(val) { this.setState({ q: val }); } handleSearch(val) { this.setState({ q: val }); console.log(this.state.q); } render() { return ( <div className="App"> <h1> {this.state.q}</h1> <Row className="show-grid"> <Col sm={2} md={4} className="contact"><h5>contact</h5><br /></Col> <Col sm={10} md={8} className="chat grid-border"><h5>chat</h5><br /> <div className="history"></div> <div className="message top-border"> <input type="text" ref="question" onChange={(e) => { this.handleChanges(this.refs.question.value) }} /> <MuiThemeProvider> <FlatButton label="Primary" primary={true} onTouchTap={(e) => { e.preventDefault(); this.handleSearch(this.refs.question.value); }} /> </MuiThemeProvider> </div> </Col> </Row>{/*show-grid ends here*/} </div> ); } } export default App; ``` If i used this material UI `TextField` instead of native HTML input tag it does not get the value from the reference. ``` <MuiThemeProvider> <TextField hintText="Ask your question" fullWidth={true} multiLine={true} rows={2} rowsMax={4} type="text" ref="question" onChange={(e) => { this.handleChanges(this.refs.question.value) }}/> </MuiThemeProvider> ``` Is there any workaround or alternative UI library for this ?