React: manipulação de eventos

Spoiler! Se você tem alguma dificuldade nesse tópico, este é o resumão que vai te salvar

6 min readJun 4, 2020

Todo dia é uma luta para achar conteúdos em português, concisos e entendíveis nessa internet que sane as minhas dúvidas sobre programação (principalmente porque sou de outra área, então :SOS: pra esses textos com linguagem difícil).

Nesse ritmo, achei que ia ser proveitoso escrever um resumão do que eu aprendi sobre manipulação de eventos em React. Vai que ajuda alguém!

Aproveitando: queria dar um shout out para o Felipe Galvão, que escreveu o artigo que foi de longe o mais produtivo pra mim nesse processo aprendizado. Sem mais delongas, bora lá!

Se você se interessa pela manipulação de eventos e outras coisas de front em React, estou assumindo que você já tenha alguma noção do que é React. Só pra ajudar os(as) curiosos(as) de plantão, um contexto rápido:

React é a biblioteca (arquivo que contém um monte de códigos e funções prontas pra você, pessoa desenvolvedora, usar a seu favor) mais popular do JavaScript, comumente utilizada para construir uma interface de usuário (IU).

A ferramenta foi desenvolvida pelo Facebook, e desde a sua criação, permanece a frente de suas principais bibliotecas competidoras.

E por quê ela é destaque em seu mercado competitivo? Simples! Os benefícios de codar com React são de longo prazo, como:

é mais simples entender de uma forma imediata. Um código React com 10.000 eventos, por exemplo, é simplificado uma vez que é organizado por componentes e ciclos de vida bem definidos;
pode ser utilizado para criar aplicações mobile (React Native). Você faz a reutilização do seu código de forma extensiva! Então, ao mesmo tempo, podem ser feitas aplicações IOS, Android e Web;
ele usa ligação de dados unidirecional e uma arquitetura de aplicação chamada Flux, que controla o fluxo de dados para os componentes por meio de um ponto de controle — o dispatcher. Assim, se torna mais fácil depurar componentes independentes de grandes aplicações;
as suas aplicações são muito fáceis de testar. As visualizações React podem ser tratadas como “funções de estado”, que dependem “do momento”, portanto, pode-se manipular com o estado que se passa para a visualização e observar as ações e eventos acionados, de saída, funções, etc. Você vai testar seu código de maneira bem mais precisa, confia em mim.

Lembrando que “React é JavaScript”. Então você precisa ter isso em mente e conhecer o JavaScript mesmo que de forma iniciante para aprender React.

Ok. O super básico muito basicamente esclarecido... Agora vamos ao que interessa!

Como manipular eventos em React

Essa parte demanda que você entenda que, na computação, eventos são chamadas disparadas sempre que alguma coisa específica acontece.

Como assim? Eu te explico! Para nós da programação, um evento nada mais é do que o resultado de uma ação.

Quando uma pessoa usuária pressiona uma tecla em um teclado, por exemplo, o programa em execução recebe um evento “KeyDown”, que vai resultar na ação programada para aquela tecla. Um clique do mouse em um botão ocasiona alguma reação (ação!) do botão. E por aí vai.

Você pode manipular eventos de maneiras distintas, mas, hoje, vamos falar de como fazer isso usando React.

*Importante lembrar que para escrever os eventos que queremos na nossa página web com React vamos usar o JSX, uma sintaxe que lembra muito o próprio jeito de escrever o HTML. Mas não a confunda com HTML, hein! (obrigada, Isac!).

Vamos lá!

Componentes, props e states em React

Para codar eventos pertinentes em React precisamos entender primeiramente o que são componentes, props e states:

componentes: componentes permitem tratar cada parte da aplicação como um bloco isolado, livre de outras dependências externas. Componentes são como funções JavaScript; aceitam entradas e retornam elementos React que descrevem o que deve aparecer na tela;
props: props são variáveis passadas para o componente ou recebidas por seu componente pai;
states: states são valores dinâmicos. Ou seja, conseguimos alterar o seu valor (estado).

Diferenças dos eventos em React

Agora vamos comparar as duas formas de escrever um evento bem simples para você entender a diferença de uma forma ainda mais tranquila. Uma delas é a forma “vanilla”, com o HTML, e a outra é “expert”, que é com React.

Olha só:

HTML #vanilla #tooeasy™

<button onclick="enviar()"> Enviar formulário! </button>

Isso significa que, quando o usuário clicar no botão escrito “Enviar formulário!”, o evento onclick vai fazer a função enviar. Entretanto, esse método vai trazer muitos problemas, principalmente quando você tiver mais de 10.000 eventos diferentes para gerenciar. Para isso, usamos o React!

React #expert #codinglikeapro

<button onClick={enviar}>
Enviar formulário!
</button>

Daí você já percebe algumas diferenças fáceis da própria sintaxe:

eventos em React são nomeados usando “camelCase” ao invés de letras minúsculas. Por isso o código tem “onClick”, e não “onclick” como no primeiro exemplo de HTML.
como dito anteriormente, você vai passar uma função como manipulador do evento, que no código está destacada como “enviar”.

Outra grande diferença é que você não pode “retornar false” para evitar um comportamento com React. Você deve usar o preventDefault para que aquilo não ocorra. Por exemplo, queremos evitar que um link, ao ser clicado, seja aberto em uma nova página. Como codaríamos no React:

  function handleClick(e) {
    e.preventDefault();
      console.log('O link foi clicado.');
}  return (
    <a href="#" onClick={handleClick}>
    Clique Aqui!
    </a>
  );
}

Nesse exemplo, “e” é um “synthetic event”. Isso significa que é um evento específico que é passado como instância e é acumulado. Quer dizer que o evento “e” do nosso exemplo será reutilizado algumas vezes e todas as suas propriedades serão anuladas após o callback do evento ser acionado (em outras palavras, quando o evento chegar ao fim).

Ele é posto dessa forma por questões de performance da página web, e não pode ser acessado de forma assíncrona (não funciona como consequência de outro código que corre no background, simultaneamente).

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.

Usando “this” nos callbacks do JSX

O significado do this é um pouco diferente nos callbacks do JSX, e é por isso que é importante separar um espacinho do artigo pra falar disso.

Em JavaScript, se você esquecer de fazer o bind de this.handleClick e passá-lo para um onClick, o this será undefined quando a função for realmente chamada. Entretanto, este não é um comportamento específico do React.

Com React, tipicamente você precisa dar bind apenas nos métodos que você passa para outros componentes. Por exemplo, <button onClick={this.handleClick}> passa this.handleCLick, logo, você deve dar “.bind” nele, como em this.handleClick.bind.

Para saber melhor como passar funções para os componentes, a leitura deste artigo é bem valiosa, prometo.

Passando argumentos para manipuladores de eventos

Quando estamos falando de uma estrutura de repetição, sabemos que é comum precisar passar mais de um parâmetro para um manipulador de evento, certo?

Por exemplo, se id é o marco de identificação da linha do seu código, qualquer um dos dois a seguir funcionará:

<button onClick={(e) => this.deleteRow(id, e)}> Deletar linha! </button>//Equivalente a:<button onClick={this.deleteRow.bind(this, id)}> Deletar linha! </button>

Os dois trechos acima são equivalentes e usam arrow functions, aquelas funções maneiras e simplificadas do JavaScript.

Em ambos os casos do exemplo, o argumento e representando o evento do React será passado como segundo argumento após o id. Com uma arrow function do primeiro exemplo, nós temos que passar esse evento explicitamente. Mas com o bind outros argumentos adicionais serão automaticamente encaminhados.

Faz sentido? Espero que sim…

Ufa! Então! Esse foi um resumão inicial do que eu tenho aprendido com meus primeiros passos em React! Você pode conferir algumas das minhas façanhas no gitHub. :-)

Se você tem algum(a) conhecido(a) que também está aprendendo ou pensando sobre começar a aprender, manda esse artigo pra ele/ela! Quem sabe lendo isso ele percebe que não é nenhum bicho de sete cabeças e se anima a começar a sua jornada no desenvolvimento de software.

No mais, é isto! Aguardem pelos próximos artigos!

(Ah, e me chama pra conversar no LinkedIn!).