Establezca el foco en un campo de entrada después de renderizar usando React

1. Usa el método componentDidMount() en React
2. Use el método Prop autoFocus en React
3. Usar el método de propiedad de referencia en línea en React
4. Conclusión

Los campos de entrada son esas barras anchas en las que ingresamos información para enviarla al servidor del sitio web. Un ejemplo popular es la barra de búsqueda de google.com.

Este artículo demostrará diferentes métodos para centrarse en un campo de entrada después de que los componentes de reacción se hayan representado en la página web.

Usa el método componentDidMount() en React

Para comenzar nuestro proyecto de reacción, cree un nuevo proyecto usando npx create-react-app exampleone desde la terminal, luego de lo cual navegamos hasta el nombre del proyecto.

La aplicación del método componentDidMount() permite que el campo de entrada se enfoque después de mostrar la página. Esta función es buena para hacer que las páginas se carguen más rápido, ya que la función no carga datos hasta después de la presentación de la primera página y se llama una vez.

Fragmento de código - 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;

Use el método Prop autoFocus en React

Después de la primera vez que se representa la página, el campo de entrada se resalta automáticamente para el usuario. Este método es ideal para un sitio web con mucho contenido que quiere que sus usuarios localicen fácilmente el campo de entrada una vez que se carga la página.

El desarrollador debe tener en cuenta esta función de enfoque automático porque la primera se enfocará si estas funciones se aplican a varios elementos.

Fragmento de código - 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;

Usar el método de propiedad de referencia en línea en React

Tenemos que escribir la función de enfoque dentro del componente de representación usando este método. Este método es el más conveniente ya que es fácil de codificar y fácil de entender en situaciones en las que compartimos nuestros códigos con otro desarrollador.

Fragmento de código - 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;

Cuando hayamos terminado con cada método, ejecutaremos la aplicación usando npm start.

Producción:

Conclusión

El efecto de enfoque en React es una forma de ayudar a los usuarios a lograr una experiencia de navegación fluida y menos engorrosa, ya que hace que la entrada sea más obvia a la vista y agrega algo de belleza a la página web.