0

Buenas tengo una funcion en React y me gustaria pasar this hacia adentro de ella para poder usar los states, alguien sabe como? Muchas gracias por su ayuda

  constructor(props) {
    super(props);
    this.state = {
      message: 'Login'
    }
  }

  componentDidMount(){
  var working = false;
  var y = document.getElementsByClassName('login');
  var login = y[0];

  login.addEventListener('submit', function(e) {
    e.preventDefault();
    if (working) return;
    working = true;
    var state = {};
    state = login.querySelectorAll('button > .state');
    login.classList.add('loading');
    this.setState({message: 'Authenticating'});
    setTimeout(function() {
      login.classList.add('ok');
      this.setState({message: 'Welcome Back!'});
      setTimeout(function() {
        this.setState({message: 'Log In'});
        login.classList.remove('ok loading');
        working = false;
      }, 4000);
    }, 3000);
  });
  }

5
  • ¿Dónde se define _this? Me parece que ya tienes la solución casi lista... Commented el 10 ene. 2018 a las 15:22
  • No, _this lo puse yo sin querer porque me acorde que se solucionaba asi pero falta algo Commented el 10 ene. 2018 a las 15:24
  • 5
    Posible duplicado de Contexto this en un Objeto. Mira la primera parte de la pregunta y verás que es el mismo escenario. Commented el 10 ene. 2018 a las 15:37
  • Ese post no soluciona mi pregunta, lo siento Commented el 10 ene. 2018 a las 15:43
  • 1
    @SantiagoD'Antuoni Tu pregunta sería mejor si indicaras que has leído esa pregunta así como el motivo por el cual no soluciona tu preguntas.
    – Rubén
    Commented el 10 ene. 2018 a las 15:55

1 respuesta 1

1

Opciones:

En el método componentDidMount define una variable let _this=this; y úsala en el resto de funciones declaradas dentro (las de los setTimeout y la del event listener). Estarás creando una "clausura" (closure, en inglés) que te resolverá el problema.

Otra solución es declarar las funciones con flecha:

 login.addEventListener('submit', (e) => {
    e.preventDefault();
    if (working) return;
    working = true;
    var state = {};
    state = login.querySelectorAll('button > .state');
    login.classList.add('loading');
    this.setState({message: 'Authenticating'});
    setTimeout(() => {
      login.classList.add('ok');
      this.setState({message: 'Welcome Back!'});
      setTimeout(() => {
        this.setState({message: 'Log In'});
        login.classList.remove('ok loading');
        working = false;
      }, 4000);
    }, 3000);
  });

Un pequeño ejemplo con funciones flecha y sin ellas, y un tercer ejemplo de una clausura:

class Test {

  constructor() {
    this.texto="hola";
  }

  metodo() {
   setTimeout(()=>{
    console.log(this.texto);
   });
  }
}

let test=new Test();
test.metodo();

class Test2 {

  constructor() {
    this.texto="no se escribirá nada";
  }

  metodo() {
   setTimeout(function() {
    console.log(this.texto);
   });
  }
}

let test2= new Test2();
test2.metodo();

class Test3 {

  constructor() {
    this.texto="clausura";
  }

  metodo() {
  let _this=this;
   setTimeout(function() {
    console.log(_this.texto);
   });
  }
}

let test3= new Test3();
test3.metodo();

3
  • Cabe aclarar, que los métodos con funciones flecha, no heredan el contexto
    – ESCM
    Commented el 10 ene. 2018 a las 17:36
  • Las funciones flecha toman el contexto en la declaración, no en la ejecución. Si están declaradas en un método, donde el contexto es el objeto, tendrán ese contexto. Commented el 10 ene. 2018 a las 17:48
  • 1
    Claro, me refiero a usar funciones flechas en el prototipo de un constructor, cómo, Object.prototype.func = () => { }
    – ESCM
    Commented el 10 ene. 2018 a las 17:50

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