I'm able to achieve this functionality only when i invoke my function manually. Used componentDidMount() in my case to bring focus on the input element when the page loads, but no luck. Sharing my code -
import React, { Component } from 'react'
export class RefsDemo2 extends Component {
constructor(props) {
super(props)
this.textInput = React.createRef();
// this.focusTextInput = this.focusTextInput.bind(this);
}
focusTextInput(){
this.textInput.current.focus();
}
componentDidMount(){
this.textInput.current.focus();
}
render() {
return (
<div>
<input type="text" ref={this.textInput}></input>
{/* <input type="button" onClick={this.focusTextInput} value="Focus this input"/> */}
{/* <input type="button" ref={this.focusTextInput} value="Focus this input"/> */}
</div>
)
}
}
export default RefsDemo2
please use Can Try This -
import React, { Component,useEffect } from 'react'
export class RefsDemo2 extends Component {
constructor(props) {
super(props)
this.textInput = React.createRef();
// this.focusTextInput = this.focusTextInput.bind(this);
}
focusTextInput(){
this.textInput.current.focus();
}
componentDidMount(){
this.textInput.current.focus();
}
useEffect(()=>{
document.getElementById("myInput").focus();
},[])
render() {
return (
<div>
<input id="myInput" type="text" ref={this.textInput}></input>
{/* <input type="button" onClick={this.focusTextInput} value="Focus this input"/> */}
{/* <input type="button" ref={this.focusTextInput} value="Focus this input"/> */}
</div>
)
}
}
export default RefsDemo2
Please, avoid using document.getElementById or any DOM query directly as the other answer suggested. This should work (as it is coming from the oficial documentation):
class CustomTextInput extends React.Component {
constructor(props) {
super(props);
// create a ref to store the textInput DOM element
this.textInput = React.createRef();
this.focusTextInput = this.focusTextInput.bind(this);
}
focusTextInput() {
// Explicitly focus the text input using the raw DOM API
// Note: we're accessing "current" to get the DOM node
this.textInput.current.focus();
}
componentDidMount() {
this.focusTextInput();
}
render() {
// tell React that we want to associate the <input> ref
// with the `textInput` that we created in the constructor
return (
<div>
<input
type="text"
ref={this.textInput} />
<input
type="button"
value="Focus the text input"
onClick={this.focusTextInput}
/>
</div>
);
}
}
As you can see, you were pretty close, but you needed to also bind the function to focus the input with ref before using it.
Edit: This is the stackblitz example working Stackblitz and editor Editor