The TextField
component ref's callback returns null
instead of the root node of the component.
More globally, it would be great to have this callback on every Material UI's components.
https://codesandbox.io/s/kzJWNlX5
This behaviour is explained by the fact that TextField
is a stateless functional component. What's the use case for that reference? I think that good rule of thumb is to add a rootRef
callback property whenever needed. Also, we could add a inputRef
callback property to access the underlying input.
Following the React docs... works for me, but I get warnings.
https://facebook.github.io/react/docs/refs-and-the-dom.html
Is there any advantage in using Ref or onChange methods?
// CustomTextField component
import React, { Component } from 'react'
import TextField from 'material-ui/TextField'
export default (props) => (
<div>
<TextField {...props} ref={props.inputRef} />
</div>
)
import React, {Component} from 'react'
import CustomTextField as TextField from '../TextField'
class LoginBox extends Component {
constructor() {
super()
}
send(event) {
event.preventDefault()
console.log(this.email.input.value
console.log(this.password.input.value})
}
render() {
return (
<div>
<form onSubmit={this.send.bind(this)}>
<div>
<TextField
name="email"
type="email"
inputRef={el => this.email = el}
/>
<TextField
name="password"
type="password"
inputRef={el => this.password = el}}
/>
<input type="submit" value="Send" />
</div>
</form>
</div>
);
}
}
warning.js?9398f22:36 Warning: Unknown prop inputRef
on tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
"material-ui": "^0.18.1",
"react": "^15.5.4",
"react-dom": "^15.5.4"
@maisumbruno My issue concerns the next
branch.
@oliviertassinari I wanted to use it for my Autocomplete component which doesn't work anymore without the ref.
@jgoux What about?
<TextField
inputProps={{
ref: (node) => { console.log('node', node); },
}}
/>
Well, that won't work yet. I'm on it.
I think that exposing a inputRef
property would be more appropriate as React is handling ref
differently from the other properties. I have been iterating with the previous suggesting, but it's quite tricky.
@jgoux Which Autocomplete component?
Thanks for the inputRef
addition!
I'm still missing the ref to the root node of TextField
. 馃槃
@Nagle This one : https://codesandbox.io/s/oQ0nkl5pk
You can try innerRef
of withStyles()
.
innerRef
did the trick! 馃憤
I'm curious, why adding a new prop like innerRef
instead of making the component a class and relying of React's native ref
?
@jgoux The component is already a class so you can always get a ref.
I'm not sure I follow.
TextField
seems to be a functional component : https://github.com/callemall/material-ui/blob/next/src/TextField/TextField.js#L9
I tried adding a ref
callback to it first, but it always return null
I tried adding a ref callback to it first, but it always return null
Functional components do not support ref callback.
Use can do this by using inputRef
Look at the my answer
https://stackoverflow.com/questions/31446751/how-to-get-password-field-value-in-reacts-material-ui/47329368#47329368
I was needing ref to get the input value , i did the simple trick after passing the ref to material ui text field.
ref={"password"}
defaultValue={"password"}
/>;
I used the this to get the value
let sPassword = this.refs.password.input.value;
Not sure if I had the same issue as the original issue but my search for a solution led me here. With RootRef as a wrapper I got the DOM ref I needed.
Most helpful comment
@jgoux What about?