¿Cómo establecer el foco en un campo de entrada después de renderizar en ReactJS?

Establecer el enfoque en un campo de entrada después de renderizar en ReactJS se puede hacer de las siguientes maneras, pero antes de hacerlo, configure la estructura de su proyecto con los siguientes pasos:

Creando la aplicación React:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:

cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Enfoque 1: podemos hacerlo en la función componentDidMount() y refs callback. Por ejemplo:

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

Nombre de archivo: App.js

import React, { Component } from "react";
class App extends Component {
  
  componentDidMount() {
    this.nameInput.focus();
  }
  
  render() {
    return (
      <div>
        <input
          defaultValue="It Won't focus"
        />
        <input
          ref={(input) => { this.nameInput = input; }}
          defaultValue="It will focus"
        />
      </div>
    );
  }
  
}
  
export default App;

Enfoque 2: si solo queremos enfocarnos en un elemento cuando se monta (inicialmente se renderiza), bastará con un uso simple del atributo autoFocus . podemos usar el accesorio de enfoque automático para que una entrada se enfoque automáticamente cuando se monta. 

Nombre de archivo: App.js

import React, { Component } from "react";
  
class App extends Component  {
    
  render() {
    return(
    <div>
      <input 
        defaultValue="It Won't focus" 
      />
      <input autoFocus
        defaultValue="It will focus"
      />
    </div>
    );
  }          
}
  
export default App;

Enfoque 3: Podemos usar la siguiente sintaxis usando la propiedad ref en línea.

<input ref={input => input && input.focus()}/>

Nombre de archivo: App.js

import React, { Component } from "react";
  
class App extends Component  {
    
  render() {
    return(
      <div>
        <input 
          defaultValue="It Won't focus" 
        />
        <input 
          ref={(input) => {input && input.focus() }} 
          defaultValue="It will focus"
        />
      </div>
    );
  }
            
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Producción: