Quando criamos o método handleMudancaTitulo(evento)
e o passamos pelo handler onChange={this.handleMudancaTitulo}
, não precisamos passar o parâmetro no onChange
?
Para evento não, pois assim como com JS puro também podemos passar somente a referência para aquela função, quando usando .addEventListener()
, o JS/React conseguem obter o evento porque usamos a API do DOM para obter informações do DOM e a API retorna o evento por padrão, quando ele é disparado. Exemplo:
function handleChange (evento){
console.log(evento);
}
const input = document.querySelector('input[name="nome"]');
input.addEventListener('change', handleChange); // Passei apenas a referência da função
Perceba que passei apenas a referência da função. Nenhum argumento foi passado em handleChange
. Isso é possível porque em JS as funções são consideradas Cidadãs de Primeira Classe, First Class Citizen. Dentre outras coisas, isso significa que uma função é tratada como qualquer outra variável.
Como que o React/JS reconhece que o que estamos é exatamente o elemento ao qual estamos nos referindo?
Na verdade, isso não é do React/JS, mas da API do DOM. E, isso é possível, porque o evento, dentro de suas propriedades, tem uma que se chama target
, que é o objeto que dispara aquele evento, e, este, por sua vez, tem o value
, que é valor daquele elemento, no caso, o valor do input
.
Quando, no input
passamos um onChange={this.handleMudancaTitulo}
, estamos adicionando um ouvinte, transformamos ele num alvo(target
) do evento, e passamos uma referência da função que cuidará deste evento quando ele for acionado.
Então, por exemplo, se digitarmos, algo no input, este listener
é avisado que o evento foi acionado e que já existe uma função agendada para cuidar daquele evento, caso algo mude ali.
Por causa disso, React reconhece que um evento está vinculado ao seu alvo.
Falando especificamente do React, segundo a documentação:
Ao usar o React, geralmente você não precisa chamar addEventListener
para adicionar ouvintes a um elemento no DOM depois que ele é criado. Ao invés disso você pode apenas definir um ouvinte quando o elemento é inicialmente renderizado.
Então, resumindo, tudo que você precisa fazer é passar uma referência da função, que cuidará daquele evento, para o listener e o React cuida disso para você.
Porém, caso precise passar algum argumento, que não o evento, você precisará passar um argumento para o evento e outro para a informação que quer passar para o handler
:
<button onClick={(e) => this.deleteRow(id, e)}>Deletar linha</button>
<button onClick={this.deleteRow.bind(this, id)}>Deletar linha</button>
Para saber mais, sugiro dar uma olhada em:
Sobre a API do DOM
Sobre React