Pular para o conteúdo principal

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.

Comentários

Mais visitadas

Manipular arquivos com PL/SQL (Oracle)

O bom e velho arquivo, é impressionante como lidamos com seus vários tipos durante todos os dias, bom hoje vamos mostrar um jeito simples de se escrever e ler arquivos apenas com a codificação nativa do Oracle. A primeira coisa a fazer é criar um diretório válido configurado no Oracle, e permissões de acesso a esse diretório para o usuário de banco onde faremos o exemplo, sendo assim suponhamos que nosso usuário de banco se chame programero, e nosso diretório real esteja em c:\programero, então logado como SYSTEM devemos executar os seguintes comandos: 1: -- cria diretorio 2: create or replace directory DIR_PROGRAMERO as ' C:\PROGRAMERO '; 3: -- concede permissão de escrita e leitura para nosso usuário 4: grant read , write on directory DIR_PROGRAMERO to PROGRAMERO; Para escrever, basicamente precisamos apenas saber onde esse arquivo ficará, no nosso caso no diretório criado acima, segue o código de escrita: 1: declare 2: -- nosso handler 3: v_a...

Centralizar Texto em Edit

Como todos sabemos o Edit mantém todo texto digitado a esquerda, o que não fica bem quando o usamos para a entrada de números, pois bem, o exemplo abaixo apresenta uma alternativa para centralizar um determinado valor dentro de um Edit: procedure EditChange(Sender: TObject); var vl_label : TLabel; //variável do tipo Label begin vl_label := TLabel.Create(self); //criamos um label WITH vl_label DO BEGIN Font.Name := TEdit(sender).Font.Name; //pegamos a fonte usada no edit Caption := TEdit(sender).Text; //pegamos o conteúdo do edit SendMessage(TEdit(sender).Handle, EM_SETMARGINS, EC_LEFTMARGIN, (TEdit(sender).Width-vl_label.Width) div 2); //centraliza no label e retorna para o edit END ; vl_label.Free; end ;

Funções de Data e Hora (Delphi)

É muito comum nos depararmos no dia a dia com a necessidade de manipular datas e horas, seja para um calculo de permanência, dias de atraso enfim, é praticamente escapar de alguma situação que necessite desse tipo de controle. Assim como a necessidade e se utilizar algum recurso para manipular as datas e horas de alguma maneira e freqüente, as duvidas de como o faze-lo também é, basta um breve olhar em qualquer fórum especializado e lá está, alguma duvida relacionada, por isso decidi falar um pouco sobre uma unit muito poderosa chamada DateUtils para a manipulação de data e hora, com um grande numero de métodos e classes que facilitam a vida de qualquer um. Alguns exemplos: CompareDate(constA, B: TDateTime): TValueRelationship; Compara apenas a data de dois valores (do tipo TDateTime) retornando: LessThanValue O primeiro valor é menor que o segundo EqualsValue Os valores são iguais GreaterThanValue O primeiro valor é maior que o segundo CompareDateTime(const A, B: TD...