Cambios de Estado

¿De que sirve una libreria de componentes si no puedes cambiar el estado de los componentes? Pues de nada, es por eso que TypesCraft te permite cambiar el estado de los componentes con facilidad.

¿Como se hace?

Para cambiar el estado de un componente, se debe usar el metodo setState que esta disponible en todos los componentes.

        import { Component, Context, MaterialApp, Widget } from "@seigenta/TypesCraft/widget";

        class MyComponent extends Component{
        build(_: Context){
            return new Container({
                child: new Text({text: this.text}),
                style: new ContainerStyle({
                    background: Color.red()
                })
            })
        }
        

Los componentes son un elemento especial que se puede usar para crear interfaces o componentes. Estos pueden luego ser usados en el codigo como cualquier otro Widget, lo que significa que puedes usarlos en cualquier otro componente.

¿Cambios de estado?

Ahora lo importante, los cambios de estado, al ser llamado en algun componente, se debe usar el metodo setState que esta disponible en la clase Component. Este tiene la particularidad de que busca todos los cambios que puedan haber ocurrido en el componente, por ejemplo, si se cambio el texto de un Text, el estado cambiara siempre y cuando tu realices el cambio en el componente.

import { Component, Context, MaterialApp, Widget } from "@seigenta/TypesCraft/widget";

class MyComponent extends Component{

    text: string = "Hello, world!";

    init(){
        setInterval(() => {
            this.text = this.text == "Hello, world!" ? "Hola, mundo!" : "Hello, world!";
            this.setState();
        }, 5000);
    }
        
    build(_: Context){
        return new Container({
            child: new Text({text: this.text}),
            style: new ContainerStyle({
                background: Color.red()
            })
        })
    }
      

Explicacion: El componente renderiza un Text con el texto "Hello, world!". Como se puede observar, este no esta recibiendo el texto desde la funcion build, sino que es una variable de instancia. Luego, en el metodo init se crea un intervalo que cambia el texto del componente cada 5 segundos. Finalmente, se llama al metodo setState con el propio componente, lo que provoca que el estado se actualice y se vuelva a dibujar el componente con el nuevo texto.