Puedo lograr esta funcionalidad solo cuando invoco mi función manualmente. Utilicé el componenteDidMount() en mi caso para centrarme en el elemento de entrada cuando se carga la página, pero no tuve suerte. Compartiendo mi código -
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 RefsDemo2por favor use Puede probar esto -
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 RefsDemo2Por favor, evite usar document.getElementById o cualquier consulta DOM directamente como sugiere la otra respuesta. Esto debería funcionar (ya que proviene de la documentación oficial):
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> ); } }Como puede ver, estuvo bastante cerca, pero también necesitaba vincular la función para enfocar la entrada con ref antes de usarla.
Editar: Este es el ejemplo de stackblitz trabajando Stackblitz y editor Editor