Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Ao utilizar o Handler e passá-lo no onChange, como que o React reconhece o parâmetro?

Olá.

Quando criamos o método handleMudancaTitulo(evento) e o passamos pelo handler onChange={this.handleMudancaTitulo}, não precisamos passar o parâmetro no onChange? Como que o React/JS reconhece que o que estamos é exatamente o elemento ao qual estamos nos referindo?

1 resposta
solução!

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

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