Pasar THIS dentro de la funcion

Question

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);
  });
  }

¿Dónde se define `_this`? Me parece que ya tienes la solución casi lista... — Pablo Lozano, Jan 10 '18 at 15:22
No, _this lo puse yo sin querer porque me acorde que se solucionaba asi pero falta algo — Santiago D'Antuoni, Jan 10 '18 at 15:24
Posible duplicado de [Contexto this en un Objeto](https://es.stackoverflow.com/questions/130068/contexto-this-en-un-objeto). Mira la primera parte de la pregunta y verás que es el mismo escenario. — Pablo Lozano, Jan 10 '18 at 15:37
@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, Jan 10 '18 at 15:55

Pablo Lozano · Accepted Answer · 2018-01-10T17:47:30.497

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();

Cabe aclarar, que los métodos con funciones flecha, no heredan el contexto — Eduardo Sebastian, Jan 10 '18 at 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. — Pablo Lozano, Jan 10 '18 at 17:48
Claro, me refiero a usar funciones flechas en el prototipo de un constructor, cómo, Object.prototype.func = () => { } — Eduardo Sebastian, Jan 10 '18 at 17:50

Pasar THIS dentro de la funcion

1 Answers1