Input
#5.0.0-beta.3
npm/es
#16.3.2
#4.1.0
I'm trying to follow along with the new way to ref in React 16.3, following the instructions at https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element for a simple auto-focus on a form found on a Modal component.
Field autofocuses on modal display.
Uncaught TypeError: this.focusRef.current.focus is not a function
at ModalRecordGame.componentDidMount (bundle.js:2359)
at commitLifeCycles (bundle.js:28501)
at commitAllLifeCycles (bundle.js:30172)
at HTMLUnknownElement.callCallback (bundle.js:18817)
at Object.invokeGuardedCallbackDev (bundle.js:18855)
at invokeGuardedCallback (bundle.js:18904)
at commitRoot (bundle.js:30311)
at completeRoot (bundle.js:31219)
at performWorkOnRoot (bundle.js:31169)
at performWork (bundle.js:31087)
constructor(props) {
super(props);
this.focusRef = React.createRef();
}
componentDidMount() {
this.focusRef.current.focus();
}
render() {
return (
<Form>
<FormGroup>
<Label for="title" hidden={true}></Label>
<Input name="title" type="textarea" rows={2} ref={this.focusRef} />
</FormGroup>
</Form>
)
}
Use innerRef
to get the raw input.
See #172 #583 #1006
I have recently added a helper to the component itself which allows you to focus the input via a ref to the component. This just makes it easier and more intuitive. It's not yet released though, I need to do that soon.
See e3124af9
@TheSharpieOne Thank you! I missed the helper function, love this project sooo much!
Most helpful comment
Use
innerRef
to get the raw input.See #172 #583 #1006