Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

onChange chama método de maneira diferente do onClick do button

Olá, na aula que coloca o evento remover no botão da tabela, é utilizado uma Arrow Function para chamar o método props.remover(index).

<td><button onClick={() => {props.remover(index)}}>Remover</button></td>

Eu não entendi por que ao chamar o método escutarInput não foi utilizado Arrow Function para executar o método. Esta dessa maneira o código utilizado na aula:

<input .... onChange={ this.escutarInput(event)} />
3 respostas
solução!

Olá Santi, tudo bem com você?

Acredito que neste caso que você deu de exemplo é justamente os tipos de dado que queremos

O onChange por padrão sempre retorna um objeto do tipo evento, então poderíamos fazer:

onChange={  event => this.escutarInput(event)}

Entretanto é um pouco redundante, dado que ao disparar o evento de onChange ele já passa para a função todos os dados do evento, isso seria útil apenas caso tivéssemos um campo especifico, ai poderíamos utilizar a arrow function para filtrar algum dado:

onChange ={ event => this.escutarInput( event.target.value )} 

Já em nossa primeira função:

onClick={() => {props.remover(index)}}

Não queremos os dados do event que o onClick retorna, por isso passamos uma arrow function que envia somente o index que é uma informação que não está de maneira nenhuma associada com o retorno do onClick

Então aqui já temos uma grande diferença, pois no onChange todas informações que queremos está presente dentro do evento

E no exemplo do onClick temos um outro problema que tem haver com a renderização dos componentes, por padrão todo componente renderizado deve ser uma função pura, se tirarmos a arrow function teremos um erro, pois ele chamara a função remover várias vezes com um estado inválido, você pode checar isso de uma maneira bem simples:

Dentro do app.js na função removeAutor adicione um pequeno console.log("Chamou o evento") por exemplo, e deixe apenas onClick={props.remover(index)}

Você verá que a função é chamada 9 vezes, além de o React dar um erro de estado inválido, e ao voltar para arrow function não será feito nenhum print, pois apenas criamos uma função anônima :)

Então quando estamos utilizando propriedades que são passadas para outros componentes o ideal é sempre utilizar arrow functions para que a função da classe mãe não seja chamada com um estado incorreto :)

E também o tipo de retorno que queremos, se a informação está presente no evento, ou se está desassociada :)

Conseguiu compreender? Qualquer coisa estou a disposição :) Abraços e Bons Estudos!

Obrigado. Entendi.

Muito bom, valeu.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software