I am trying to use React refs to focus a Redux-Form Field when it mounts.
When I try this.refs.title.getRenderedComponent().focus()
in componentDidMount
, an error is thrown saying:
edit_fund.js:77 Uncaught TypeError: Cannot read property 'getRenderedComponent' of undefined
When I console.log this.refs, it is mostly an empty object and sometimes identifies 'title' as being a ref, but it is not dependable.
Am I using refs incorrectly? My code is below for reference.
componentDidMount = () => {
this.refs.title
.getRenderedComponent()
.focus();
}
...
<Field
id="title"
name="title"
component={FormInput}
type="text"
ref="title" withRef
/>
Refs are a function provided by React to access the DOM element and the React element that you might have created on your own. They are used in cases where we want to change the value of a child component, without making use of props and all.
Please try setting ref using callback function:
ref={(input) => { this.title = input; }}
and then use this to get underlying DOM node:
ReactDOM.findDOMNode(this.title).focus();
of if DOM input element is wrapped in another element:
ReactDOM.findDOMNode(this.title).getElementsByTagName("input")[0].focus()
According to React docs using refs with a string have some issues. Please check docs for more details.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With