Enfocar un campo de entrada en React después del renderizado

En React, establecer el enfoque en un campo de entrada después del renderizado se puede lograr mediante varios métodos .

Un enfoque es utilizar referencias como se sugiere en la documentación. Al asignar una referencia al campo de entrada dentro de la función de renderizado (por ejemplo, "nameInput"), puede acceder a su nodo DOM e invocar manualmente el método de enfoque. Sin embargo, es fundamental comprender dónde y cuándo llamar a esta función.

Llamar a la función de enfoque

La ubicación más sencilla para llamar a la función de enfoque es el método del ciclo de vida componenteDidMount del componente . Esto garantiza que el foco se establezca después de que el componente se haya montado en el DOM. El código se vería así:

import React, { useRef, useEffect } from "react";

const MyComponent = () => {
  const nameInputRef = useRef();

  useEffect(() => {
    if (nameInputRef.current) {
      nameInputRef.current.focus();
    }
  }, []);

  return (
    
  );
};

export default MyComponent;

Opción de enfoque automático

Como alternativa, puede utilizar el accesorio de enfoque automático proporcionado por React. Al establecer este accesorio en verdadero en el campo de entrada, el componente se enfocará automáticamente al montarlo.

return (
  
);

Tenga en cuenta que, en JSX, la propiedad es autoFocus (con F mayúscula), a diferencia del atributo HTML que no distingue entre mayúsculas y minúsculas.