En la entrada anterior, tratamos las propiedades ( this.props) que sirven para pasar información del componente padre a componentes hijos, pero esa información es inmutable, es decir, no se puede modificar. En esta entrada, vamos a ver el estado de un componente y los eventos. El estado de un componente es información del propio componente que se inicializa con un valor por defecto y éste es mutable durante la vida del componente. Si el estado cambia, el componente y sus hijos se volverán a renderizar automáticamente.
Una vez hemos visto qué es el estado de un componente, vamos a ver cómo se accede y cómo se cambia su valor. Para acceder al estado de un componente lo haremos a través de la propiedad state, es decir, this.state. Para modificar propiedades del estado, no se hace con una asignación del valor, si no que se hace utilizando la función this.setState({}).
Ahora vamos a ver un ejemplo práctico de cómo funciona. Como en entradas anteriores, yo voy a utilizar como base para esta entrada, el código de la entrada anterior. Lo que vamos a hacer va a ser extraer los objetos JSON que se están pasando manualmente por propiedades y ponerlos en el estado, después haremos un bucle por la propiedad del estado donde los pongamos y los pasaremos otra vez por propiedades al componente PostItem. Visualmente, no se notará nada porque se seguirá mostrando lo mismo, pero estará todo mejor organizado.
Primero abrimos el archivo src/components/PostList.js y, como hemos dicho, vamos a extrar los objetos JSON que se están pasando por propiedades y ponerlos en el estado del componente. Antes de nada, hay que decir que hay varias maneras de inicializar el estado, vamos a ver las dos.
La primera manera sería dentro del contructor de la clase inicializar la propiedad state:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
... constructor(props) { super(props); this.state = { posts: [ { id: 1, title: "Post Title 1", content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." }, { id: 2, title: "Post Title 2", content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." } ] }; } ... |
Y la segunda es una opción más limpia y corta. No se crea ningún contructor, si no que se pone directamente como propiedad de la clase:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
... state = { posts: [ { id: 1, title: "Post Title 1", content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." }, { id: 2, title: "Post Title 2", content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." } ] }; ... |
Puedes utilizar la que quieras, porque hacen exactamente lo mismo. Yo me voy a quedar con la segunda.
Una vez ya hemos definido el estado, lo que vamos a hacer va a ser hacer el bucle para pasar por propiedades la información para que se vuelva a mostrar:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
... render() { let posts = this.state.posts; return ( <div> {posts.map(post => ( <PostItem key={post.id} post={post} /> ))} </div> ); } ... |
El componente PostItem tiene una propiedad key porque React.js cuando haces un bucle y creas una lista de elementos necesita que pongamos esta propiedad, si no nos saldrá un warning por la consola. Esto es para que React.js pueda identificar que elementos han cambiado, se han añadido o eliminado.
Con ésto, ya volveremos a ver el listado de posts como antes.
Ahora lo que vamos a ver va a ser un ejemplo de como mutar el valor del estado y, a partir de ésto, veremos cómo funcionan los eventos en React.js. Lo que vamos a hacer va ser crear un pequeño formulario que añada posts al estado (posts) y que se muestren automáticamente en el listado gracias a la reactividad de React.js.
Vamos a crear un componente para el formulario:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import React from "react"; class PostForm extends React.Component { render() { return ( <form onSubmit={this.props.onSubmit}> <div> <label htmlFor="title">Title</label> <input type="text" id="title" /> </div> <div> <label htmlFor="content">Content</label> <textarea id="content" /> </div> <div> <button type="submit">Save</button> </div> </form> ); } } export default PostForm; |
Desde el evento onSubmit del formulario estamos llamando a una función onSubmit que pasaremos a continuación por propiedades al componente. Esta función estará en el componente padre, así podremos acceder al estado del componente padre y añadir el post.
La función onSubmit se ejecutará cuando se lance el evento onSubmit del formulario, es decir, cuando se haga click en el botón de tipo submit. En React.js existen muchos más tipos de eventos como el onClick se lanzará cuando hagamos click en el elemento, onChange se lanzará cuando cambie el valor de un select, por ejemplo. También, existe un evento onKeyPress que se lanzará cuando presionamos una tecla, entre MUCHÍSIMOS más que puedes ver en este enlace.
Vamos al componente PostList y añadimos el siguiente código:
|
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 PostForm from "./PostForm"; class PostList extends React.Component { ... handleSubmit = event => { event.preventDefault(); const lastPost = this.state.posts.slice(-1).pop(); let newPost = { id: lastPost.id + 1, title: event.target.title.value, content: event.target.content.value }; console.log(newPost); const posts = [...this.state.posts, newPost]; this.setState({ posts: posts }); }; render() { let posts = this.state.posts; return ( <div> <PostForm onSubmit={this.handleSubmit} /> ... </div> ); } } export default PostList; |
Primero lo que hacemos es importar el componente anteriormente creado para el formulario.
Después, hemos creado la función anteriormente mencionada ( handleSubmit) que será la función que añada el nuevo post al array de posts del estado. En la función, creamos un objeto con los datos necesarios para el post, creamos una varaible ( posts) que contiene los post que ya tiene el estado más el nuevo y, finalmente, actualizamos los posts del estado ( this.setState).
Llamamos al componente PostForm y le pasamos la función handleSubmit como una propiedad llamada onSubmit.
Probamos todo:
Como puedes ver funciona todo correctamente y se añade el post del formulario al listado de posts.
Código completo de la entrada: https://github.com/fullstackseriescom/aprender-reactjs/tree/master/04-estado-y-eventos
Ejemplo en vivo de la entrada: https://repl.it/@vreaxe/Reactjs-Estado-y-eventos
-
– https://reactjs.org/docs/forms.html
– https://reactjs.org/docs/faq-state.html
– https://reactjs.org/docs/events.html#supported-events
– https://daveceddia.com/where-initialize-state-react/
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
Un post muy clarificador.
Gracias, tenía un poco de lio conceptual con esto y ahora ya lo entiendo.
Como añadido, si los ejemplos estuvieran también hechos con componentes funcionales (los de clase ya se usan más bien poco por lo que he podido ver), estaría genial.
Muchas gracias Carlos.