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!