React - Eventos

O uso de eventos no React é muito parecido com o que já fazemos em html, a diferença fica por conta da nomeação, que deve ser em "camelCase" e no luga de texto sempre é passado uma função como manipulador. Além disso, para evitar o comportamento padrão de um evento, antes era informado o "return false", e no React devemos sempre usar o "preventDefault".

Evento padrão

"< button onclick="salvar(); return false; > Salvar < / button >"

Evento React

"< button onclick="{salvar}" > Salvar < / button >

function salvar(e) {

    e.preventDefault();

}

Passagem de argumentos

Como não poderia de deixar de ser, é perfeitamente possível passar argumentos para os manipuladores de eventos, podemos usar "arrow functions" ou "bind":

"< button onclick={(e) = > this.remover(id, e)} > Remover < / button >"

"< button onclick={this.remover.bind(this, id)} > Remover </ button >"

Exemplo

Para exemplificar criaremos uma aplicação que simula uma tabela, nosso componente "Linha" representa um registro, cada registro tem um botão que remove o registro. O "remover" deixa de renderizar a linha na tabela, e antes de esconder ela mostraremos o nome do produto sendo "removido". Ao final teremos visto o uso de eventos e a passagem de parâmetros para o manipulador.

O exemplo pode ser visto aqui.