Eventos no React: Diferenças e Aplicações

Prévia do material em texto

PROGRAMAÇÃO 
FRONT END II 
Fabiano Berlinck Neumann
Eventos no React
Objetivos de aprendizagem
Ao final deste texto, você deve apresentar os seguintes aprendizados:
 � Diferenciar eventos React e DOM.
 � Formular passagem de parâmetros para manipuladores de eventos.
 � Produzir aplicações usando eventos.
Introdução
Por mais que as regras de negócio de um sistema Web sejam processadas 
no lado do servidor, parte do código do sistema também precisa ser 
processada e apresentada no navegador escolhido pelo usuário, como 
no caso dos sites, na parte front end dos aplicativos de smartphones, 
tablets e smart TVs. Tal modelo é conhecido como cliente/servidor, em 
que, no geral, a estrutura da aplicação é distribuída para processamento 
e armazenamento de dados em ambos os lados.
Para que seja possível programar a interação adequada entre o usuário 
e a aplicação, tanto no âmbito da usabilidade quanto da experiência 
do usuário, é necessário conhecer os eventos e saber lidar com eles 
quando são disparados pelo projeto de front end, independentemente 
de linguagem de programação e das tecnologias utilizadas escolhidas.
Neste capítulo, você aprenderá sobre eventos React e DOM e suas 
principais diferenças, como funciona a passagem de parâmetros para 
os manipuladores de eventos, além de ver exemplos de aplicações que 
os utilizam.
Eventos React e DOM
Os eventos são ações ou ocorrências que acontecem nas aplicações e são 
informadas aos desenvolvedores para que possam ser respondidas da maneira 
esperada, como no caso de um botão em um site que, ao ser clicado, entre outras 
possibilidades, pode apresentar uma caixa de informação (INTRODUÇÃO..., 
2019, documento on-line).
Para que essas ações aconteçam, o programa aciona um sinal de deter-
minado tipo quando elas são ativadas e podem ser tratadas por mecanismos 
automatizados, programados pelo desenvolvedor front end. É possível imaginar 
um evento acontecendo em um aeroporto, quando a pista fica vazia para 
pouso e decolagem, e a torre informa ao piloto que o caminho está livre e lhe 
concede autorização, dando início ao movimento desejado com a aeronave 
em direção à pista.
No caso de sistemas Web, os eventos acontecem dentro dos navegadores 
e são vinculados a algum item específico dentro deles, como um elemento 
simples, um conjunto de elementos, um documento carregado em uma deter-
minada aba ou, até mesmo, toda a janela do navegador.
São diversos tipos de eventos que podem acontecer em uma aplicação, como:
 � controlar um vídeo com as funções de começar e parar; 
 � clicar em um elemento com o mouse ou passá-lo por ele; 
 � pressionar alguma tecla no teclado; 
 � preencher um formulário e enviá-lo para o sistema;
 � uma página que termina de carregar; 
 � um erro que pode ser verificado pelo programador no console.
Eventos DOM
Eventos DOM são enviados para notificar programaticamente o sistema de 
acontecimentos específicos (EVENT, 2019, documento on-line). Cada evento 
contém uma representação em um objeto que tem como base a interface Event 
e que pode ter campos e funções que disponibilizam informações adicionais 
sobre o ocorrido.
Além disso, eles afirmam que os eventos podem representar desde inte-
rações com os usuários até notificações automatizadas sobre acontecimentos 
na renderização, bem como ser tanto eventos-padrão definidos nas especifi-
cações oficiais quanto específicos para utilização interna em determinados 
navegadores.
Eventos no React2
Conheça os eventos e seus tipos no guia de referência do grupo de desenvolvedores 
da Mozilla, clicando no link a seguir.
https://qrgo.page.link/TqtDG
Para Kacmarcik e Leithead (2016), os eventos de interface do usuário 
herdam características e comportamentos dos objetos de evento do DOM, 
definidos na especificação oficial. Normalmente são implementados para 
gerenciar a interação com o usuário com entradas de interação com o mouse 
ou teclado e projetados com dois objetivos principais:
1. Projeto de um sistema de eventos que permita o registro de manipula-
dores de eventos e a descrição do fluxo do evento por meio da estrutura 
de árvore.
2. Fornecimento de um subconjunto comum dos sistemas de eventos atuais, 
utilizados nos navegadores escolhidos pelos usuários, possibilitando a 
interoperabilidade dos scripts e dos conteúdos (não é esperada a com-
patibilidade total desse objetivo com versões anteriores de navegadores 
e do DOM, mas as especificações visam a atender esse ponto sempre 
que possível).
A interface Event representa um evento que acontece dentro do DOM 
que, além de ser acionado por ações como clique no mouse ou teclado, pode 
ser gerado por application programming interface (APIs, em português in-
terface de programação para aplicativos), para representar o progresso de 
uma requisição assíncrona, quando a requisição não trava o processamento 
do restante da aplicação na espera da resposta. Também pode ser acionado 
programaticamente a partir de chamadas de métodos, como o click() de 
um objeto HTMLElement, ou enviados para um destino específico por meio 
do método dispatchEvent() do objeto EventTarget. 
São diversos os tipos de evento, sendo que alguns utilizam interfaces que 
são baseadas na interface Event principal para herdar suas características 
e seus comportamentos. A interface Event em si contém propriedades e 
métodos que são comuns a todos eventos.
3Eventos no React
Arquitetura de eventos DOM
Como visto anteriormente, aplicações podem disparar objetos do tipo evento 
por meio do método dispatchEvent(). Dessa forma, o objeto evento 
se propagará por toda árvore DOM, conforme determinado pelo fluxo de 
eventos DOM.
Mesmo assim, antes de o objeto ser enviado, é necessário determinar o 
caminho de propagação do objeto evento, que nada mais é do que uma lista de 
destinos pelos quais o evento deve passar e que refletem a estrutura hierárquica 
do documento da página Web. O último elemento da lista é o alvo do evento, 
assim como em uma árvore genealógica, o diretamente anterior é o objeto-pai, 
e todos os anteriores são seus ancestrais.
De acordo com Kacmarcik e Leithead (2016), com o caminho determinado, 
o objeto evento passa por uma ou mais fases do evento, que são: a de captura, 
de destino e da bolha, que podem ser puladas quando não suportadas ou se a 
propagação do objeto for cancelada. 
 � Fase de captura: o objeto parte desde a raiz da árvore até o nó-pai do 
objeto destino.
 � Fase de destino: o objeto evento chega ao nó destino. Caso o objeto 
chegue nessa fase e tenha a indicação de não borbulha, o evento será 
interrompido após essa fase.
 � Fase de bolha: (ou fase de borbulha) o objeto se propaga de volta à 
raiz do documento, do destino até seus ancestrais, em ordem reversa, 
começando com o nó-pai e indo até o nó window.
Os eventos podem ser cancelados, o comportamento que eles cancelam pode 
ser chamado de ação-padrão, e os objetos canceláveis podem ser associados 
com uma ou mais ações-padrão. Para cancelar um evento, é necessário chamar 
o método preventDefault().
Além disso, os eventos podem ser síncronos ou assíncronos, que repre-
sentam disparados um após o outro, aguardando a resposta do primeiro para 
enviar o segundo, ou simplesmente dados são enviados independentes de 
resposta. No caso dos eventos síncronos, nenhuma outra ação é tomada antes 
da resposta da ação do evento anterior. Já os eventos assíncronos podem ser 
disparados sempre que o resultado de uma ação for concluída, sem que haja 
relação entre eles e outros eventos.
Eventos no React4
Eventos React
Segundo a parte de manipulação de eventos da documentação oficial do 
React, manipular eventos em elementos React é muito similar à manipulação 
de eventos nos elementos DOM, com apenas algumas diferenças sintáticas, 
como pode ser observado nos exemplos a seguir.
Exemplo em HTML e JavaScript:
<button onclick="cadastrarUsuario()">
 Cadastrar
</button>
Exemplo em React:
<button onClick="{cadastrarUsuario}">
 Cadastrar
</button>
Nocaso do HTML/JavaScript o evento se chama onclick, enquanto 
no React o evento é escrito onClick, usando camel case, que significa que 
a primeira letra da segunda palavra em diante começa com letra maiúscula. 
Outra diferença é que, com o JSX, a função cadastrarUsuário é passada 
como manipulador de eventos, entre as chaves, ao invés de um texto.
Além disso, no React não é possível retornar false para evitar o com-
portamento-padrão do evento em determinado elemento, como é feito no caso 
do HTML a seguir.
<a href="#" onclick="alert('Link clicado!'); return false">
 Clique Aqui
</a>
5Eventos no React
No caso do React, é necessário chamar o método preventDefault 
explicitamente, como no seguinte caso.
function ActionLink() {
 function handleClick(e) {
 e.preventDefault();
 alert('Link clicado!');
 }
 return (
 <a href="#" onClick={handleClick}>
 Clique Aqui
 </a>
 );
}
Nesse exemplo em React, a letra “e” dentro do método handleClick() 
é um evento sintático de acordo com a especificação W3C, o que permite a 
compatibilidade entre os navegadores. 
Passagem de parâmetros para manipuladores 
de eventos
Cada um dos eventos disponíveis possui um manipulador de eventos — ou 
event handler, em inglês —, que é um trecho de código que costuma ser uma 
função definida pelo desenvolvedor e executado apenas quando o evento 
é acionado. Quando esse trecho de código é criado para ser executado em 
resposta a um evento disparado, é possível afirmar que o desenvolvedor 
está registrando um manipulador de eventos (MANIPULANDO..., 2019, 
documento on-line).
Algumas vezes, os manipuladores de eventos também são chamados de 
escutadores de eventos — ou event listeners, em inglês. Apesar de os nomes 
serem bastante parecidos, os escutadores ficam ouvindo os eventos que estão 
acontecendo, e os manipuladores são os trechos de código que são executados 
como resposta aos eventos, como no exemplo a seguir.
Eventos no React6
Trecho do código HTML:
<button> clique aqui </button>
Código em JavaScript:
var btn = document.querySelector('button');
btn.onclick = function() {
 alert('Botão clicado!');
}
Observa-se a variável btn armazena a referência ao botão por conta do 
método document.querySelector(). O trecho de código que segue é o 
manipulador do evento. A variável btn aponta para um elemento <button>, 
que contém diversos eventos que podem ser disparados a partir dele e tratados 
pelos manipuladores de eventos. Com o método onclick recebendo uma 
função que apresenta o alerta, o programa fica escutando o evento de clique 
no botão e apresentará o alerta sempre que o botão for clicado.
Muitos elementos DOM podem ser configurados para ouvir esses eventos 
e chamar funções para processamento como resposta a eles. Os manipuladores 
de eventos costumam ser vinculados a vários elementos HTML, a partir da 
utilização do método EventTarget.addEventListener(). Este recebe 
dois parâmetros: o primeiro é o nome do evento que o desenvolvedor deseja 
registrar para ser manipulado, e o segundo é a parte do código que deve ser 
executada como resposta ao evento registrado.
Entretanto, quando o desenvolvedor trabalha com React, não é necessário 
chamar o método addEventListener para adicionar ouvintes ao elemento 
DOM após a sua criação. Basta definir o ouvinte no momento inicial de ren-
derização do elemento. Além disso, se o componente for definido por meio 
da utilização de uma classe do ES6, é comum que a própria função na classe 
seja o manipulador de evento, conforme exemplo a seguir.
class ReactAlert extends React.Component {
...
 handleClick() {
 alert('Botão React Clicado!');
 }
7Eventos no React
 render() {
 return (
 <button onClick={this.handleClick}>
 Clicar
 </button>
 );
 }
...
}
Quando houver a necessidade de passar algum parâmetro extra para um 
manipulador de eventos, como no caso de uma estrutura de repetição em que 
pode ser necessário passar o identificador da linha para o evento, é preciso 
utilizar o conceito de arrow functions ou Function.prototype.bind, 
como nos exemplos a seguir, que fazem a mesma coisa:
<button onClick={(e) => this.deleteRow(id, e)}>Deletar linha</
button>
<button onClick={this.deleteRow.bind(this, id)}>Deletar linha</
button>
Como dito anteriormente, ambos os casos são equivalentes. No primeiro 
caso, o argumento "e" representa o evento do React que será passado como 
segundo parâmetro após a variável id, que representa o identificador da li-
nha. Já no segundo caso, o evento React também é passado juntamente com 
argumentos adicionais, mas agora de forma automática, graças ao bind que 
recebe o this e o id.
Outro exemplo que exige que o desenvolvedor passe parâmetros para os 
manipuladores de eventos é o caso do preenchimento e da submissão de um 
formulário em que o usuário registra seu nome. Elementos de formulário 
em HTML mantêm seu próprio estado e realizam a atualização de acordo 
com a entrada do usuário. Já no React, o estado é mutável e costuma ser 
mantido na propriedade state dos componentes, que pode ser atualizado 
por meio da função setState(), como pode ser observado no trecho de 
código a seguir.
Eventos no React8
handleChange(event) {
 this.setState({value: event.target.value});
}
render() {
 return (
 <form onSubmit={this.handleSubmit}>
 <label>
 Nome:
 <input type="text" value={this.state.value} 
onChange={this.handleChange} />
 </label>
 <input type="submit" value="Enviar" />
 </form>
 );
}
É possível observar que o atributo value é definido no <input> com 
this.state.value, de forma que o estado do React seja a fonte de controle 
do manipulador de eventos. Já o evento onChange do elemento <input> 
é vinculado ao método handleChange(). Ele será executado a cada tecla 
pressionada pelo usuário, de forma que, além de exibir o que está sendo 
digitado pelo usuário, o estado armazenará o valor do campo por meio do 
objeto event, passado automaticamente como parâmetro para a função 
handleChange().
Além disso, o componente React controla o que acontece no formulário 
em cada uma das entradas do usuário, além de renderizá-lo. Quando isso 
acontece, ele é chamado de componente controlado. Com isso, cada mutação 
de estado terá uma função de manipulação ou um manipulador de eventos 
associado.
9Eventos no React
Exemplos de aplicações
Como visto até o momento, com o React, os elementos de formulário, como 
o <input>, apresentam estado mutável e normalmente são mantidos na 
propriedade state dos componentes, contendo um manipulador de eventos 
associado a cada mutação de estado (FORMULÁRIOS, 2019, documento 
on-line).
No exemplo a seguir, baseado em exemplos do tópico de formulários da 
documentação oficial, é apresentado um formulário maior, em que é necessário 
manipular múltiplos eventos por meio dos componentes controlados. Para 
isso, é utilizado o atributo name para cada um desses elementos e o valor de 
event.target.name para tratá-los na função manipuladora de eventos.
class Confirmation extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 isConfirmed: true,
 numberOfPeople: 3
 };
 this.handleInputChange = this.handleInputChange.
bind(this);
 }
 handleInputChange(event) {
 const target = event.target;
 const value = target.type === 'checkbox' ? target.
checked : target.value;
 const name = target.name;
 this.setState({
 [name]: value
 });
 }
Eventos no React10
 render() {
 return (
 <form>
 <label>
 Confirmados:
 <input
 name="isConfirmed"
 type="checkbox"
 checked={this.state.isConfirmed}onChange={this.handleInputChange} />
 </label>
 <br />
 <label>
 Número de pessoas:
 <input
 name="numberOfPeople"
 type="number"
 value={this.state.numberOfPeople}
 onChange={this.handleInputChange} />
 </label>
 </form>
 );
 }
}
Nesse caso, a função manipuladora de eventos é a handleInputChange, 
que recebe o objeto event como parâmetro e, com isso, consegue acessar a 
propriedade target do evento para conhecer o componente que realizou o seu 
disparo, bem como o atributo name, que é utilizado para saber a propriedade 
do estado que será atualizada dentro do método this.setState().
Para encontrar mais exemplos, desde a instalação até os pontos mais avançados, como 
outros tipos de elementos e seus respectivos manipuladores de eventos, é possível 
acessar a documentação oficial do React no link a seguir.
https://qrgo.page.link/UJnaq
11Eventos no React
EVENT. MDN Web Docs, Mountain View, 2019. Disponível em: https://developer.mozilla.
org/pt-BR/docs/Web/API/Event. Acesso em: 24 out. 2019.
FORMULÁRIOS. React/Facebook Open Source, [S. l.], 2019. Disponível em: https://pt-br.
reactjs.org/docs/forms.html. Acesso em: 24 out. 2019.
INTRODUÇÃO a eventos. MDN Web Docs, Mountain View, 2019. Disponível em: https://
developer.mozilla.org/pt-BR/docs/Aprender/JavaScript/Elementos_construtivos/Events. 
Acesso em: 24 out. 2019.
KACMARCIK, G.; LEITHEAD, T. UI Events: W3C Working Draft. Cambridge; Sophia-Antipolis; 
Minato; Beijing: World Wide Web Consortium, 4 Aug. 2016. Disponível em: https://www.
w3.org/TR/DOM-Level-3-Events/#event-flow. Acesso em: 24 out. 2019.
MANIPULANDO eventos. React/Facebook Open Source, [S. l.], 2019. Disponível em: https://
pt-br.reactjs.org/docs/handling-events.html. Acesso em: 24 out. 2019.
Leituras recomendadas
EVENT reference. MDN Web Docs, Mountain View, 2019. Disponível em: https://developer.
mozilla.org/pt-BR/docs/Web/Events. Acesso em: 24 out. 2019.
INTRODUÇÃO. React/Facebook Open Source, [S. l.], 2019. Disponível em: https://pt-br.
reactjs.org/docs/getting-started.html. Acesso em: 24 out. 2019.
Eventos no React12