How to Set Focus on an Input Field in React After Rendering?

Setting Focus on an Input Field Post-Rendering in React

Setting focus on a specific input field after component rendering can be achieved through React's ref system. By assigning a ref to the input field using the "ref" attribute, you gain access to its DOM node, allowing you to manipulate its focus state.

As mentioned in the documentation, you can set a ref named "nameInput" to your input field during the render function. However, the critical question is: where should you call the "focus()" method?

Optimal Invocation Point

For optimal results, you should call the "this.refs.nameInput.getInputDOMNode().focus()" method within the "componentDidMount" lifecycle method. This method is invoked immediately after the component is mounted and inserted into the DOM. By calling the focus method here, you ensure that the focus is set as soon as the component becomes visible.

Alternative Option

@Dhiraj's solution offers an alternative approach by utilizing the "autoFocus" prop. This prop, when set to true, instructs the input field to automatically focus when it is mounted. You can use it like this:

Note that "autoFocus" should be capitalized "autoFocus" in JSX, unlike HTML, which is case-insensitive.

The above is the detailed content of How to Set Focus on an Input Field in React After Rendering?. For more information, please follow other related articles on the PHP Chinese website!