1

Tengo una serie de dudas sobre react porque creo que no he aprendido la funcionalidad y cuando se renderiza... tambien tengo dudas de como buscar determinados componentes, me explico si por ejemplo tengo un boton y quiero que el padre del boton cambie de color.Por ahora tengo este codigo y tengo errores ya que intenta pintar el estado sin haberlo definido antes

Tengo dudas sobre como funciona exatamente React si tienes algun enlace de algun curso para echarme una mano lo agradeceria gracias de antemano

import React from 'react';

class Titulo extends React.Component {
    constructor(props) {
        this.state = {
            visibility : 'visible'
        }
        this.props = {};
    }

    activar() {
        alert(this);
        this.setState({
            visibility: 'hidden'
          });
    }

    render() {
        return (
            <div  className="Titulo">
                <h1>
                    {this.state.visibility}
                </h1>
                <button onClick={activar}>
                    Activar function
                </button>

            </div>
        );
    }
}

export default Titulo;
2

3 respuestas 3

2

Yo te recomendaría comenzar con el tutorial oficial de Reactjs. Está disponible en español para que tengas menos problemas.

Respondiendo a por qué no se ejecuta el código, al momento de dar click al botón no ocurre lo esperado porque no existe un activar global, sino solo el que declaraste dentro de la clase y no le estás haciendo referencia. Para lograrlo, debes colocar onClick={this.activar} pero no solo eso, sino que deberás "atar" el evento con el componente. Para ello solo debes colocar .bind(this) después del nombre del método:

<button onClick={this.activar.bind(this)}>
  Activar function
</button>

No es la única manera, puedes declarar una propiedad de la clase y asignarle dicha función ya "atada", sé que suena complicado pero solo es hacer esto:

constructor(props) {
    this.state = {
        visibility : 'visible'
    }
    this.props = {};
    this.activar = this.activar.bind(this); // <-- Solo necesitas agregar esta línea
}
...
render() {
    ...
            <button onClick={this.activar}>
                Activar function
            </button>
    ...
}

Esto último es especialmente útil si necesitas usar la misma función más de una vez.

0

Deberías poner this.activar:

            <button onClick={this.activar}>
                Activar function
            </button>
0

Te voy a dar mi opinión sobre los estados de los componentes. En react los componentes forman un arbol y los estados se actualizando de la raíz hacía las hojas, esto quiere decir que ese es el flujo de react, y se lo ideo de esta manera para tener un mayor control de del flujo de datos de la aplicación. Obviamente, había muchísimos casos en los que esto, se volvía una limitación, por ejemplo en el caso de que nodos sin un ancenstro común(excepto por el nodo raíz) dependieran de un estado, imaginate tener que pasar todo el estado por todo el arbol! Esto en react es un antipatrón por eso surgieron tecnologías como redux, más tarde react desarollo Context, teconologías que se usan para mantener un estado global. Context es una forma de pasar datos a través del árbol de componentes sin tener que pasar props manualmente en cada nivel. Te paso el link con la documentación oficial, porque yo creó que en el ejemplo que das, es más conveniente usar Context. https://es.reactjs.org/docs/context.html

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.