How to set focus on an input field after rendering?

What's the react way of setting focus on a particular text field after the component is rendered?

Documentation seems to suggest using refs, e.g:

Set ref="nameInput" on my input field in the render function, and then call:

this.refs.nameInput.getInputDOMNode().focus();

But where should I call this? I've tried a few places but I cannot get it to work.

You should do it in componentDidMount and refs callback instead. Something like this

componentDidMount(){
   this.nameInput.focus(); 
}

class App extends React.Component{
componentDidMount(){
this.nameInput.focus();
}
render() {
return(


{ this.nameInput = input; }}
defaultValue="will focus"
/>

);
}
}

ReactDOM.render(, document.getElementById('app'));




Stack Overflow Q#28889826, score: 810