Saltar al contenido

Cómo centrarse en un elemento de entrada en REACT (después de render)-dic 21stIn este tutorial, vamos a aprender acerca de la manera de concentrarse en un …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo enfocar un elemento cuando un componente se representa en el DOM.

si abrimos una Google.com el elemento de entrada se enfoca automáticamente y podemos empezar a escribir sin ningún tipo de clic de botón.

Vamos a aprender cómo podemos hacerlo en reaccionar aplicaciones.

En reaccionar, tenemos el método del ciclo de vida ComponentDidMount () en el que se ejecuta cuando un componente está montado en el árbol DOM. Método

El ComponentDidMount () es el mejor lugar para establecer un enfoque en el elemento de entrada.

Veamos un ejemplo.

import React,{Component} from 'react';
class App extends Component {
componentDidMount() {
this.searchInput.focus(); }
render() {
return (


(this.searchInput = inputEl)} />

);
}
}

En el código anterior en primer lugar, se accede a la entrada de referencia de elemento mediante el uso de reaccionar refs de devolución de llamada.

A continuación, se invoca el método () dentro componentDidMount () this.searchInput.focus, de modo que del elemento de entrada se centra.

ajustar el enfoque utilizando ganchos

En el ejemplo anterior, hemos basado en la clase de uso de reaccionar componentes que vamos a ver en la versión ganchos.

import React, { useEffect, useRef } from "react";
function App() {
const searchInput = useRef(null);
useEffect(()=>{
// current property is refered to input element
searchInput.current.focus(); },[])

return (


);
}

establecer el foco en el botón haga clic

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

function App() {
const searchInput = useRef(null)

function handleFocus(){
searchInput.current.focus()
}

return (



);
}