Skip to content
Jaccon
  • Home
  • Biografia
  • Github
  • Imasters
  • Entrevistas
  • Arquivo
  • Contato
Menu

ReactJS / Criando uma função handleInputChanges para diversos tipos de input types

André Jaccon
Tech Lead Mobsale Payments & E-commerce

Eu mantenho este trabalho de forma voluntária e sem fins lucrativos desde 2003. Se puder siga-me nas redes sociais

Linkedin
Github
Youtube
Facebook
Twitter
LinkedIn
Email
Print
WhatsApp

Faça parte das comunidades que eu participo no Telegram e Discor.

Participar

No exemplo abaixo estaremos falando de uma técnica para criar uma função de handleinputChanges global para pegar todo e qualquer tipo de input types.
Input text, radio buttons, selects, text areas todos estes tipos de input utilizando a mesma função handleInputChanges. Vamos a função

Explicando a função:

Setando o target
Na linha 2 nós setamos a constante target com o valor que vem de event.target do formulário. Event.target pegaremos direto do DOM do HTML.

Setando o value
Para pegarmos o value do formulário fazemos uma verificação para target.type.
Se ele for do tipo checkbox ele pegar target.checked ou se for de outro tipo ele busca target.value.

Veja o exemplo no exemplo abaixo que temos uma notação ternária onde significa que
se target.type === 'checkbox' pegamos target.checked ou se for de outro tipo buscamos target.value;

Setando o name
Para setar o nome simplesmente pegamos target.name.

Setando os valores no estado
e por final setamos os valores no estado com

this.setState onde teremos [name] : value subsequente

Agora podemos ver esta função sendo utilizada na prática no exemplo abaixo:

André Jaccon Tech Lead
© Copyleft - André Jaccon Tech lead
Search for:
Fechar Menu