Saltar al contenido

Cómo acceder a los nodos DOM en reaccionar usando refsOct, 21stSometimes que necesitamos para tener acceso a los nodos DOM particulares en nuestra reaccionamos …

marzo 13, 2020

 

A veces tenemos que acceder a los nodos DOM particulares en nuestra reaccionar los componentes en tales casos reaccionar nos proporciona un atributo árbitro acceso que nodo DOM. En este tutorial, vamos a aprender acerca de cómo utilizar atributos árbitro en Reaccionar aplicaciones.

podemos crear el árbitro mediante el método React.createRef ().

¿Has visto si se abre el cuadro de búsqueda Google.com se enfoca automáticamente ?. Lo mismo que creó a continuación utilizando atributo ref.

class Search extends React.Component {

inputText = React.createRef();
componentDidMount() { this.inputText.current.focus()
}

render() {
return (

)
}

}

En el código anterior primero que invoca el método React.createRef () y se la pasó a la atributo de entrada elemento de ref.

En componentDidMount () método de ciclo de vida que accede a ese elemento de entrada utilizando la propiedad actual.

Reaccionar assings elemento DOM a la propiedad actual cada vez que los montajes y cesionarios componente Volver al nulo cuando desmonta componentes.

También se puede utilizar en el interior del árbitro los componentes funcionales.

function SmallComponent(){

const inputText = React.createRef();
function handleFocus(){
inputText.current.focus(); }

return(

)
}

devolución de llamada árbitros

Hay otra manera de utilizar los árbitros mediante el uso de funciones de devolución de llamada . Reaccionar pasa el elemento DOM como un argumento para la función de devolución de llamada. de

Let repalce lo anterior componente de búsqueda usando referencias de devolución de llamada.

class Search extends React.Component {

componentDidMount() {
this.inputText.focus()
}

render() {
return (

this.inputText = node} placeholder="search" />

)
}

}

Reaccionar invoca la función de devolución de llamada haciendo pasar un elemento DOM cuando los montajes de componentes andpasses nula cuando desmonta componentes.

Otro ejemplo de formulario de sesión

class Login extends React.Component{

state = {
username:null,
password:null
}

handleSubmit=(e)=>{
e.preventDefault();

this.setState({
username:this.refusername.value,
password:this.refpassword.value
})
}
render(){
return (

this.refusername=name } />
this.refpassword=pass } />

)
}

}

Nota: Las actualizaciones árbitro ocurren antes componentDidMount () y métodos de ciclo de vida componentDidUpdate ().