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>

Este método trás 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>

React tem seu próprio gerenciamento de evento por uma série de razoes, por exemplo, um diferente esquema de gerenciamento do DOM o virtualDOM, React tenta deixar o gerenciamento de eventos mais consistente. 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

Outra questão importante eventos dentro de React sao passados como propriedade em camelCase onClick, ou onFocus, tambem 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.

  • Clipboard Events
  • Composition Events
  • Keyboard Events
  • Focus Events
  • Mouse Events
  • Selection Events
  • Touch Events
  • UI Events
  • Wheel Events
  • Media Events
  • Image Events
  • Animation Events
  • Transition Events

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) utilzei createClass formato utilizado com ES5 nessa versao vou utilizar ES6:

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 nos acionamos quando passamos o render do nosso componente neste caso onClick.

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

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *