How to set focus on an input field after rendering

0 votes

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? 

Jul 22, 2020 in Angular by kartik
• 37,530 points
681 views

1 answer to this question.

0 votes

Hello @kartik,

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(
      <div>
        <input 
          defaultValue="Won't focus" 
        />
        <input 
          ref={(input) => { this.nameInput = input; }} 
          defaultValue="will focus"
        />
      </div>
    );
  }
}
    
ReactDOM.render(<App />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>
<div id="app"></div>

Hope it helps!!

Thank You!!

answered Jul 22, 2020 by Niroj
• 82,880 points

Related Questions In Angular

0 votes
1 answer

How can we redirect to an existing route using ngRoute?

Routing is just another way of fixing some content ...READ MORE

answered Feb 6, 2020 in Angular by Niroj
• 82,880 points
1,296 views
0 votes
1 answer

How can we redirect to another page from existing page on clicking alert?

hii, It is really simple to redirect from ...READ MORE

answered Feb 6, 2020 in Angular by Niroj
• 82,880 points
2,127 views
0 votes
1 answer

How to set session timeout in web.config?

Hello @kartik, If you want to set the ...READ MORE

answered Jul 23, 2020 in Angular by Niroj
• 82,880 points
2,837 views
0 votes
1 answer

Why it is necessary to refresh CSRF token per form request?

Hello, Generating a new CSRF token for each ...READ MORE

answered Mar 19, 2020 in Laravel by Niroj
• 82,880 points
2,322 views
0 votes
1 answer

What is meant by passing the variable by value and reference in PHP?

Hello, When the variable is passed as value ...READ MORE

answered Mar 27, 2020 in PHP by Niroj
• 82,880 points
859 views
0 votes
1 answer

Connection with MySQL server using PHP. How can we do that?

Hey @kartik, You have to provide MySQL hostname, ...READ MORE

answered Mar 27, 2020 in PHP by Niroj
• 82,880 points
262 views
0 votes
1 answer

How to retrieve or obtain data from the MySQL database using PHP?

Hello kartik,  Actually there are many functions that  ...READ MORE

answered Mar 27, 2020 in PHP by Niroj
• 82,880 points
844 views
0 votes
1 answer

How can we go back to previous page after having some error on request made through current page ?

$route is used for deep-linking URLs to controllers ...READ MORE

answered Feb 11, 2020 in Angular by Niroj
• 82,880 points
231 views
0 votes
1 answer

How to disable postback on an asp Button?

Hello @kartik, Use: YourButton.Attributes.Add("onclick", "return false"); or <asp:button runat="server" ... OnClientClick="return ...READ MORE

answered Jul 23, 2020 in Angular by Niroj
• 82,880 points
2,877 views