Como escrever manipuladores de eventos no React

Aprenda como declarar manipuladores de eventos neste artigo de Adam Boduch, um desenvolvedor de aplicativos da web experiente com uma vasta experiência que varia de jQuery a React e tudo mais.
O React possui uma abordagem exclusiva para manipular eventos: declarar manipuladores de eventos em JSX. O fator de diferenciação na manipulação de eventos nos componentes React é que é declarativo. Compare isso com algo como jQuery, onde você deve escrever um código imperativo que seleciona os elementos DOM relevantes e anexa funções de manipulador de eventos a eles.

A vantagem com a abordagem declarativa dos manipuladores de eventos na marcação JSX é que eles fazem parte da estrutura da interface do usuário. Não ter que rastrear o código que atribui manipuladores de eventos é mentalmente libertador. Neste artigo, você escreverá um manipulador de eventos básico, para ter uma ideia da sintaxe declarativa de manipulação de eventos encontrada nos aplicativos React. Em seguida, você aprenderá como usar funções genéricas de manipulador de eventos.
Declarando funções do manipulador
Aqui está uma olhada em um componente básico que declara um manipulador de eventos para o evento click de um elemento:
import React, {Component} de 'react';

classe padrão de exportação MyButton estende o Componente {
// O manipulador de eventos click, não há nada acontecendo aqui além de um log do evento.
onClick () {
console.log ('clicado');
}
// Renderiza um elemento " " com o manipulador de eventos "onClick" definido como o método "onClick ()" deste componente.
render () {
return (
{this.props.children} />
);
}
}
A função do manipulador de eventos,, this.onClick()é passada para a onClickpropriedade do elemento Observando essa marcação, fica claro qual código será executado quando o botão for clicado.
Manipuladores de eventos múltiplos
A sintaxe declarativa do manipulador de eventos é fácil de ler quando há mais de um manipulador atribuído a um elemento. Às vezes, por exemplo, existem dois ou três manipuladores para um elemento. É difícil trabalhar com código imperativo para um único manipulador de eventos, muito menos vários deles. Quando um elemento precisa de mais manipuladores, é apenas outro atributo JSX. Isso se adapta bem de uma perspectiva de manutenção de código:
import React, {Component} de 'react';
classe padrão de exportação MyInput estende o Componente {
// Disparado quando o valor da entrada de texto muda ...
onChange () {
console.log ('alterado');
}
// Disparado quando a entrada de texto perde o foco ...
onBlur () {
console.log ('turva');
}
// os elementos JSX podem ter quantas propriedades de manipulador de eventos forem necessárias.
render () {
retornar ;
}
}
Esse elemento pode ter vários outros manipuladores de eventos, e o código seria igualmente legível.
À medida que você adiciona mais manipuladores de eventos aos seus componentes, notará que muitos deles fazem a mesma coisa. Em seguida, você aprenderá como compartilhar funções genéricas de manipulador entre componentes.
Importando manipuladores genéricos
Qualquer aplicativo React provavelmente compartilhará a mesma lógica de manipulação de eventos para diferentes componentes. Por exemplo, em resposta a um clique no botão, o componente deve classificar uma lista de itens. São esses tipos de comportamentos genéricos que pertencem aos seus próprios módulos, para que vários componentes possam compartilhá-los. Implemente um componente que usa uma função genérica de manipulador de eventos:
import React, {Component} de 'react';
// Importe o manipulador de eventos genérico que manipula o estado de um componente.
importação reversa de './reverse';
classe padrão de exportação MyList estende o Componente {
state = {
items: ['Angular', 'Ember', 'React']
};
// Torna a função genérica específica para esse componente chamando "bind (this)".
onReverseClick = reverse.bind (this);
render () {
const {estado: {itens}, onReverseClick} = this;
return (

{/ * Agora podemos anexar o manipulador "onReverseClick" ao botão e a função genérica funcionará com o estado desse componente. * /}
<

{items.map ((v, i) =>
• {v}
)}

);
}
}
Você está importando uma função chamada reverse(). Essa é a função manipuladora de eventos genérica que você está usando com seu elemento. Quando clicada, a lista deve reverter sua ordem.
O onReverseClickmétodo realmente chama a reverse()função genérica . Ele é criado usando bind()para vincular o contexto da função genérica a esta instância do componente.
Por fim, observando a marcação JSX, é possível ver que a onReverseClick()função é usada como manipulador para o clique do botão.
Então, como isso funciona exatamente? Você tem uma função genérica que de alguma forma altera o estado desse componente porque você vinculou o contexto a ele? Bem, praticamente, sim, é isso. Aqui está uma olhada na implementação da função genérica agora:
// Exporta uma função genérica que altera o estado de um componente, fazendo com que ele seja renderizado novamente.
exportar a função padrão reverse () {
this.setState (this.state.items.reverse ());
}
Esta função depende de uma this.statepropriedade e uma itemsmatriz dentro do estado. A chave é que o estado é genérico; um aplicativo pode ter muitos componentes com uma itemsmatriz em seu estado.
Aqui está a aparência da sua lista renderizada:

Como esperado, clicar no botão faz com que a lista seja classificada, usando seu reverse()manipulador de eventos genérico :

Se você achou este artigo interessante, pode explorar o React e o React Native - Second Edition para criar aplicativos para plataformas móveis da Web e nativas com React, JSX, Redux e GraphQL. React and React Native - Second Edition leva você a usar o React 16 e o ​​React Native 0.5 para criar aplicativos móveis e nativos de desktop poderosos e atraentes para todas as plataformas.