Quando passo métodos de classe como props preciso por o bind apontando para a minha classe?

Durante as aulas eu notei que o instrutor não coloca o bind, mas quando tento fazer da mesma forma que ele, os meus métodos retornam o this das props, por algum motivo na execução do método é substituido o meu this por esse, seria alguma atualização em algum pacote instalado?

ex:

export default class MyClass { constructor() { this.teste = 'teste' }

printTeste() {
    console.log(this.teste)
}

}

class exemplo { constructor(){ this.teste = new MyClass() }

render() {
    return (
        <ComponentTeste funcaoTeste={this.teste.printTeste} />
    )
}

}

class ComponentTeste { handleClick() { this.props.funcaoTeste() }

render() {
    return (
        <button onClick={this.handleClick()} > Imprima Teste </button>
    )
}

}

No print do meu console mostra um objeto com as minhas props, no caso funcaoTeste: function....

Ps. Baixei os arquivos da aula e subi o servidor pra testar e o do instrutor funciona

Opa Danilo, tudo certo?

Nao sei se vou conseguir te explicar bem, então vou primeiramente te resumir:

A regra do .bind() eh simples, se eu tenho uma funcao dentro de uma classe, e nessa funcao eu chamo this.algumaCoisa, quando eu passar essa funcao pra um outro componente será preciso dizer quem é 'this'. Caso eu passe uma funcao que dentro dela eu nao chame nenhum this.algumaCoisa, entao nao preciso dizer quem eh 'this'.

printTeste() {
    console.log(this.teste) 
}

Aqui voce criou uma funcao printTeste(), passando pra ela um console.log de this.teste. Entao, se voce passar essa funcao pra algum componente, voce vai precisar dizer quem eh o this do console.log. Caso fosse console.log('um texto qualquer'), nao seria necessario passar o 'this'. Isso acontece por que o javaScript aloca o 'this' lexicamente, ou seja, onde ele é chamado. Com o metodo bind o contexto 'this' fica travado onde foi setado.

Entao nesse caso quando voce foi passar essa funcao para um outro componente via props, voce deveria ter feito:

class exemplo { 
    constructor() { 
        this.teste = new MyClass() 
    }

render() {
    return (
        <ComponentTeste funcaoTeste={this.teste.printTeste.bind(this.teste} />
    )
}

Espero ter ajudado Danilo! Faz o teste ai e me diz se deu certo. Tamo junto!

Mergulhe em programação