Como definir .bind(this) | React parte 1: componentes reutilizáveis para sua webapp

1
resposta

por Wanderlei Borba Cordeiro

| 38.9k xp | 5 posts

Estou tentando fazer um relógio para mostrar a hora e ir atualizando os segundos, porém não estou conseguindo definir o bind na hora de mudar o status de data.

Qual e a meneira correta de fazer? this.setState({data: horaImprimivel }).bind(this);

import React, { Component } from 'react';

export default class Relogio extends Component{


    constructor() {
        super();
        this.state = {data:'00:00:00'};
    }


    componentDidMount(){
          setInterval(this.tick, 1000);
    };



     tick(){
         console.log('ué');
         let   momentoAtual = new Date();
         let   hora = momentoAtual.getHours();
         let   minuto = momentoAtual.getMinutes();
         let   segundo = momentoAtual.getSeconds();

         let   horaImprimivel = hora + " : " + minuto + " : " + segundo;

         this.setState({data: horaImprimivel }).bind(this);

     }



    render() {
        return(
            <div className="mdl-cell mdl-cell--6-col">
                {/* Inicio 6 colunas */}
                <div className="demo-card-wide mdl-card mdl-shadow--6dp ">
                    <div className="mdl-card__title">
                        <h2 className="mdl-card__title-text">{this.state.data}</h2>
                    </div>
                    <div className="mdl-card__supporting-text">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Mauris sagittis pellentesque lacus eleifend lacinia...
                    </div>
                    <div className="mdl-card__actions mdl-card--border">
                        <a className="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                            Get Started
                        </a>
                    </div>
                    <div className="mdl-card__menu">
                        <button className="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                            <i className="material-icons">share</i>
                        </button>
                    </div>
                </div>
                {/* fim 6 colunas */}
            </div>
        );
    }
}

1 resposta

por Rafael Rollo

| 496k xp | 755 posts

Alura Scuba Team Instrutor e Desenvolvedor

21/08/2017

Fala Wanderlei, tudo bem ?

A ideia do bind é você conseguir passar a referência do this do react, pra ser usado internamente por outra função. O bind deve ser feito, dentro de uma função do ciclo de vida de um componente react (já que o this delas são do próprio componente react, tendo assim acesso ao this.state, por exemplo).

No seu caso, creio que resolveria fazer o bind na passagem da referência da função tick, no componentDidMount:

componentDidMount(){
          setInterval(this.tick.bind(this), 1000);
}

Assim passamos o this do react, pra dentro da função tick, onde agora deve funcionar o this.setState({...});

Muito comum fazer no render, ou no construtor por exemplo:

render() {
    return(
        ...
        <input .. onChangeText={this.handleTextChange.bind(this)} />
        ...
    ) ;
}

constructor() {
    super();
    this.state = {...}

    this.tick = this.tick.bind(this);
}

Espero ter ajudado. Abraço!