Eventos com React

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.

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:

• Ciclo de vida de um componente react
• Pensando em React
• Componentes Stateless vs Stateful

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