Eventos com React

Blog fellyph cintra - react js

Nesse post iremos ver como trabalhar eventos com react. O React é uma biblioteca JavaScript para criar interfaces de usuário. Ele foi criado pelo Facebook e é utilizado por muitas empresas, como Netflix, Airbnb e Imgur. O React tornou-se popular por sua abordagem de componentes reutilizáveis ​​e o seu modelo de dados unidirecional.

Eventos são importantes para qualquer aplicativo da web, pois eles nos permitem interagir com o usuário. Sem eventos, as nossas aplicações seriam estáticas e não muito úteis.

Diferenças entre Eventos com React e JavaScript

Se você tem um background JavaScript. Quando trabalhamos com vanilla JavaScript temos várias formas de trabalhar com eventos, adicionando atributos no nosso elemento HTML, definindo o atributo no JavaScript ou adicionando um listener, direto no elemento HMTL seria da seguinte forma:

<button onclick="doSomething">Clique Aqui</button>
Code language: HTML, XML (xml)

Este método traz muitos problemas, por exemplo, manutenção e gerenciamento de eventos. Outro formato adicionando um listener:

<script> document.getElementById('me').addEventListener('click', function(){ alert('hello') }); </script>
Code language: HTML, XML (xml)

Gerenciamento de eventos com react

React tem o seu próprio gerenciamento de evento por uma série de razões, por exemplo, um diferente esquema de gerenciamento do DOM o virtualDOM, React tenta deixar o gerenciamento de eventos mais consistentes. Todo evento retorna um SyntheticEvent, ele tem uma série de atributos:

boolean bubbles boolean cancelable DOMEventTarget currentTarget boolean defaultPrevented number eventPhase boolean isTrusted DOMEvent nativeEvent void preventDefault() boolean isDefaultPrevented() void stopPropagation() boolean isPropagationStopped() DOMEventTarget target number timeStamp string type
Code language: JavaScript (javascript)

Como são passados os eventos com react?

Outra questão importantes eventos dentro de React são passados como propriedade em camelCase onClick, ou onFocus, também podemos utilizar stopPropagation() ou preventDefault() como eventos nativos do JavaScript. O SyntheticEvent trabalha com o conceito de pooled, o objeto é limpo após o callback for invocado, por uma questão de performance.

Lista completa de eventos com react

Antes de trabalhar com eventos precisamos entender é a questão de props e state, no exemplo abaixo quando publiquei este post(2 anos atrás) utilizei createClass formato utilizado com ES5 nessa versão vou utilizar ES6:

class ButtonComponent extends React.Component { constructor(props) { super(props); this.state = {active: true}; } toggle() { this.setState((prevStatus) => ({active: !prevStatus.active})); } render () { return <button onClick={() => this.toggle()}> Status:{this.state.active + ''} </button>; } } ReactDOM.render( <ButtonComponent />, document.getElementById('events') );
Code language: JavaScript (javascript)

No exemplo acima crio um componente botão onde ele simplesmente faz o toggle de um atributo, poderia ser qualquer outro atributo ou interagir com outro elemento. O evento acionámo-nos quando passamos o render do nosso componente neste caso onClick.

Para mais conteúdo relacionado com react leia os posts:

Lembrando todos os exemplos estão no meu github: https://github.com/fellyph/react-tutorial

Por Fellyph Cintra

Fellyph Cintra é um Google Developer Expert focado em tecnologias web, com participação ativa na comunidade WordPress. Com mais de 14 anos de experiência no mercado, Fellyph já palestrou em mais de 30 eventos ao redor do Brasil e Europa, sempre abordando as boas práticas de desenvolvimento na web.

Deixe um comentário

O seu endereço de e-mail não será publicado.