Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use React refs to focus a Redux Form field?

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
 />
like image 228
Trey Granderson Avatar asked Feb 25 '17 17:02

Trey Granderson


People also ask

What do react refs do?

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.


1 Answers

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.

like image 144
Bartek Fryzowicz Avatar answered Oct 07 '22 13:10

Bartek Fryzowicz