Como fazer evento de onChange no React JS

Neste artigo você vai aprender a como fazer evento de onChange com React JS, um evento muito importante para inputs

Fala programador(a), beleza? Bora aprender mais sobre eventos em React!

Introdução

O React é uma biblioteca JavaScript popular e poderosa para criar interfaces de usuário.

Um aspecto fundamental do desenvolvimento de aplicativos web é lidar com eventos do usuário, como alterações em campos de entrada.

Neste artigo, exploraremos como fazer evento de onChange no React para ajudá-lo a criar uma experiência de usuário dinâmica e interativa.

Entendendo eventos em React

Os eventos em React são uma maneira de lidar com ações do usuário, como cliques, mudanças de valor e movimentos do mouse.

Eles são semelhantes aos eventos do DOM, mas o React encapsula os eventos em objetos chamados SyntheticEvents para garantir a compatibilidade entre navegadores.

Um exemplo comum de evento é o evento “onChange”, que é acionado quando o valor de um elemento de entrada muda.

Para entender como fazer evento de onChange no React, primeiro precisamos aprender a criar um manipulador de eventos e anexá-lo a um elemento de entrada.

Criando um manipulador de eventos onChange

Vamos criar um componente funcional simples com um campo de entrada e um manipulador de eventos onChange.

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

O manipulador de eventos é uma função que é chamada quando o evento onChange é acionado.

Exemplo:

import React, { useState } from 'react';

function App() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleChange} />
      <p>Valor digitado: {inputValue}</p>
    </div>
  );
}

export default App;

Neste exemplo, primeiro importamos o React e o hook useState. Em seguida, criamos um componente funcional chamado App.

Dentro do componente, definimos o estado do valor da entrada usando o hook useState.

A função handleChange é nosso manipulador de eventos onChange, que atualiza o estado do valor da entrada quando o evento é acionado.

Anexando o manipulador de eventos ao elemento de entrada

Para anexar o manipulador de eventos ao elemento de entrada, usamos a propriedade onChange.

No exemplo acima, adicionamos onChange={handleChange} ao elemento de entrada.

Isso garante que, quando o valor do elemento de entrada for alterado, a função handleChange seja chamada e o estado do componente seja atualizado.

Como fazer evento de onChange em select no React JS

Assim como os campos de entrada, os elementos de seleção (ou “select”) também podem usar o evento onChange no React.

Essa abordagem permite criar componentes de seleção dinâmicos e reativos.

Nesta seção, veremos como fazer evento de onChange em select no React JS.

Exemplo:

import React, { useState } from 'react';

function App() {
  const [selectedOption, setSelectedOption] = useState('');

  const handleSelectChange = (event) => {
    setSelectedOption(event.target.value);
  };

  return (
    <div>
      <select value={selectedOption} onChange={handleSelectChange}>
        <option value="">Selecione uma opção</option>
        <option value="option1">Opção 1</option>
        <option value="option2">Opção 2</option>
        <option value="option3">Opção 3</option>
      </select>
      <p>Opção selecionada: {selectedOption}</p>
    </div>
  );
}

export default App;

Neste exemplo, importamos o React e o hook useState, e criamos um componente funcional chamado App.

Semelhante ao exemplo anterior, usamos o hook useState para definir o estado da opção selecionada.

Em seguida, criamos uma função chamada handleSelectChange que serve como nosso manipulador de eventos onChange para o elemento “select”.

Essa função recebe o evento como argumento e atualiza o estado com o valor da opção selecionada.

No componente de retorno, adicionamos um elemento “select” com a propriedade value definida como selectedOption e a propriedade onChange definida como handleSelectChange.

Isso garante que, quando uma opção for selecionada, a função handleSelectChange seja chamada e o estado do componente seja atualizado com a opção selecionada.

Ao seguir esse exemplo, você pode aprender como fazer evento de onChange em select no React JS e criar componentes de seleção dinâmicos e interativos para melhorar a experiência do usuário.

Quer aprender mais sobre React? Confira o vídeo abaixo:

Conclusão

Neste artigo, exploramos como fazer evento de onChange no React JS, um aspecto fundamental para criar aplicações web interativas e dinâmicas.

Aprendemos a criar um manipulador de eventos, anexá-lo a um elemento de entrada e atualizar o estado do componente com base nas alterações do usuário.

Com esse conhecimento, você estará mais bem equipado para criar experiências de usuário ricas e envolventes usando o React.

Está buscando em evoluir como Programador? Confira o nossos cursos clicando aqui.

Nosso principal objetivo é tornar você um dev profissional que é capaz de resolver problemas de alta dificuldade e criar projetos complexos, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.

Cursos com vários projetos, exercícios, material apoio, comunidade de alunos e muito mais!

Como lidar com vários inputs com um único onChange:

Na vida real quase nunca tu tem só um campo, né?

Um formulário costuma ter nome, email, senha e por aí vai

A sacada aqui é usar o atributo name de cada input pra reaproveitar UM único manipulador de eventos, ao invés de criar uma função pra cada campo

Se liga no exemplo:

import React, { useState } from ‘react’;

function App() { ”, email: ” });

const handleChange = (event) => { const { name, value } = event.target; };

return ( <div> <input type="text" name="nome" value={form.nome} onChange={handleChange} /> <input type="email" name="email" value={form.email} onChange={handleChange} /> <p>Nome: {form.nome} | Email: {form.email}</p> </div> ); }

export default App;

Como cada input tem um name diferente, o mesmo handleChange sabe qual campo do estado atualizar

Isso deixa teu código MUITO mais limpo quando o formulário cresce

onChange em checkbox: cuidado com o event.target.value

Aqui tem uma pegadinha que já pegou muita gente

No input de texto tu lê o valor com event.target.value

Mas no checkbox o que interessa é se ele está marcado ou não, e isso vem de event.target.checked

Tome cuidado! Se tu usar value no checkbox vai se enrolar

Exemplo:

import React, { useState } from ‘react’;

function App() {

const handleCheck = (event) => { setAceito(event.target.checked); };

return ( <div> <input type="checkbox" checked={aceito} onChange={handleCheck} /> <p>{aceito ? ‘Aceito os termos’ : ‘Não aceito’}</p> </div> ); }

export default App;

Então fica a regra: input de texto e select usam value, checkbox e radio usam checked

Perguntas frequentes sobre o onChange no React

Qual a diferença entre onChange e onInput no React?

No React o onChange já se comporta como o onInput do HTML puro, ou seja, dispara a cada tecla digitada e não só quando o campo perde o foco

Na prática, pra inputs controlados tu vai usar o onChange na esmagadora maioria dos casos

Como pegar o valor digitado no onChange?

O valor vem dentro do objeto do evento, no event.target.value

Por isso a gente escreve handleChange = (event) => setInputValue(event.target.value)

Por que meu input não deixa digitar no React?

Esse é o erro mais comum de todos

Se tu coloca value={algumEstado} mas esquece o onChange, o campo trava e não digita nada

Input controlado precisa dos dois andando juntos: o value lendo o estado e o onChange atualizando ele

Dá pra usar onChange em textarea e select também?

Dá sim, funciona igualzinho ao input de texto

Tanto o textarea quanto o select leem o valor pelo event.target.value dentro do onChange