En esta entrada, vamos a ver las refs (referencias). Según la documentación de React.js, las refs son una forma de acceder a elementos del DOM o a elementos React creados en el método render. En el ejemplo que vamos a ver a continuación, lo que haremos será indicarle al componente del formulario (PostForm.js) que una vez se haya renderizado, haga focus en el input del título automáticamente y lo haremos mediante refs.
Hay varias formas de declarar una referencia. La primera que vamos a ver será usando el método React.createRef() y la segunda que veremos será utilizando una arrow function que son las llamadas ‘callback refs’.
Vamos a ver el primer ejemplo hecho con el método React.createRef(). Primero de todo hay que decir que este método se introdujo en la versión 16.3 de React, así que fíjate que tengas esa versión o una posterior.
Una vez dicho esto, vamos al componente PostForm.js y lo modficamos para que quede así:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
import React from "react"; class PostForm extends React.Component { constructor(props) { super(props); this.titleInput = React.createRef(); } componentDidMount() { this.titleInput.current.focus(); } render() { return ( <form onSubmit={this.props.onSubmit}> <div> <label htmlFor="title">Title</label> <input type="text" id="title" ref={this.titleInput} /> </div> <div> <label htmlFor="body">Content</label> <textarea id="body" /> </div> <div> <button type="submit">Save</button> </div> </form> ); } } export default PostForm; |
Hemos añadido el constructor con una propiedad de la clase llamada titleInput que será una referencia. Después, en el input del título en el método render hemos añadido un atributo ref con la propiedad creada anteriormente para vincular la propiedad con este elemento del DOM. Ahora, podremos acceder a este elemento a través de la propiedad this.titleInput. Finalmente, añadimos un método del ciclo de vida de un componente para que cuando se haya renderizado el componente se haga focus en el input referenciado ( this.titleInput.current.focus()).
Ahora vamos a ver el mismo ejemplo anterior, pero hecho con ‘callback refs’, es decir, sin utilizar el método React.createRef() y utilizando una arrow function en el atributo ref del input.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
import React from "react"; class PostForm extends React.Component { componentDidMount() { this.titleInput.focus(); } render() { return ( <form onSubmit={this.props.onSubmit}> <div> <label htmlFor="title">Title</label> <input type="text" id="title" ref={input => (this.titleInput = input)} /> </div> <div> <label htmlFor="body">Content</label> <textarea id="body" /> </div> <div> <button type="submit">Save</button> </div> </form> ); } } export default PostForm; |
Si te fijas, no necesitamos el constructor, por tanto, lo eliminamos. El atributo ref del input es una arrow function a la cual se le pasa un parámetro input que, en este caso, es el elemento DOM del input. Este parámetro lo asignamos a una propiedad de la clase llamada this.titleInput. De esta manera, ya podremos acceder al input desde esta propiedad. Finalmente, en el componentDidMount llamamos a la función focus directamente desde la propiedad titleInput. En este caso, no hace falta llamar a la propiedad current antes de la función, como en el ejemplo anterior.
Como siempre, esto es simplemente un ejemplo. En este caso, me he basado en los ejemplos de la documentación. Si quieres profundizar sobre las referencias, echa un vistazo a la documentación de React.js.
Código completo de la entrada: https://github.com/fullstackseriescom/aprende-reactjs/tree/master/07-refs
Ejemplo en vivo de la entrada: https://repl.it/@vreaxe/Reactjs-Refs
-
Si hay cualquier tipo de error en el post o te surge cualquier duda, no dudes en ponerlo en los comentarios o enviarme un correo desde la página de contacto.
CONTACTAR