Como pegar valor de input no React JS

Neste artigo você aprenderá a como pegar valor de input no React JS, uma ação comum ao lidar com formulários

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

O React JS revolucionou a forma como desenvolvemos interfaces de usuário.

No entanto, para quem está começando, algumas tarefas que parecem simples em JavaScript puro podem parecer um pouco mais complexas no React.

Uma dessas tarefas é pegar o valor de um input. Neste artigo, guiaremos você pelo processo de como acessar e trabalhar com valores de inputs no React.

Estado e Input: Uma Relação Bidirecional

No React, a informação de um componente é mantida em seu estado (state).

Para controlar o valor de um input, ligamos esse valor ao estado do componente.

Inicializando o Estado

Para começar, você precisará usar o hook useState para criar uma variável de estado que armazenará o valor do input.

import React, { useState } from 'react';

function Formulario() {
  const [texto, setTexto] = useState('');
  
  return (
    // Componente JSX vai aqui
  );
}

Ligando o Input ao Estado

Agora, vincule o valor do input ao estado e adicione uma função para atualizar esse estado cada vez que o valor do input mudar.

function handleChange(evento) {
  setTexto(evento.target.value);
}

return (
  <input type="text" value={texto} onChange={handleChange} />
);

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

Evento onChange: A Chave para Acessar o Valor

O evento onChange é acionado sempre que o valor do input é alterado. Usando este evento, podemos atualizar nosso estado com o novo valor do input.

Entendendo o Evento

Em nosso exemplo anterior, quando o usuário digita no input, o evento onChange é acionado, invocando a função handleChange.

Dentro desta função, acessamos o valor atual do input com evento.target.value.

Otimizando com useRef

Se você precisar acessar o valor do input sem armazená-lo no estado (por exemplo, apenas quando um botão é pressionado), você pode usar o hook useRef.

import React, { useRef } from 'react';

function Formulario() {
  const inputRef = useRef();

  function pegarValor() {
    alert(inputRef.current.value);
  }

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={pegarValor}>Mostrar Valor</button>
    </div>
  );
}

Formulários Controlados vs Não Controlados

O exemplo que demos acima é de um “formulário controlado”, onde o React controla o valor e a atualização do input.

No entanto, com useRef, mostramos um exemplo de “formulário não controlado”, onde o DOM controla o valor e apenas acessamos esse valor quando necessário.

Embora ambas as abordagens tenham seus usos, formulários controlados são geralmente recomendados no React porque dão mais controle sobre os dados e a UI.

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Pegar o valor de um input é uma tarefa fundamental em qualquer aplicação web. No React, graças aos hooks useState e useRef, essa tarefa é fácil e intuitiva.

A chave é entender a diferença entre formulários controlados e não controlados e escolher a abordagem que melhor atenda às suas necessidades.

Através deste guia, esperamos que você tenha adquirido uma compreensão clara de como trabalhar com inputs no React.

Com a combinação certa de estado, referências e eventos, você pode criar formulários interativos e responsivos com facilidade.

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.

Resposta rápida:

Pra pegar valor de input no React JS existem dois caminhos, e é só isso

O controlado: o valor mora no state e o onChange atualiza esse state a cada tecla

O não controlado: o valor fica no próprio DOM e você busca ele só na hora que precisa, com uma ref

Se o formulário precisa validar, formatar ou habilitar botão enquanto a pessoa digita, vai de controlado

Se é só ler o valor no clique de um botão, o não controlado resolve e ainda re-renderiza menos

Bora ver os dois na prática? 🙂

Vários inputs com uma função só:

Formulário quase nunca tem um campo só, né?

E criar um useState e um handleChange pra CADA input vira aquele componente gigante que ninguém quer manter

O truque é dar um name pra cada input e guardar tudo em um objeto no state

'', email: '' })

function handleChange(evento) {
const { name, value } = evento.target
}

return (
<>
<input type="text" name="nome" value={form.nome} onChange={handleChange} />
<input type="email" name="email" value={form.email} onChange={handleChange} />
</>
)

É propriedade dinâmica: a chave do objeto vira o valor da variável name, então só o campo que mudou é atualizado

Já o espalhamento (…anterior) é o que mantém os outros campos vivos

Tome cuidado! Esqueceu o spread, os outros campos somem do objeto e os inputs aparecem vazios do nada

Pegando o valor no envio do formulário:

Até aqui a gente lê o valor a cada tecla digitada

Mas na prática o que interessa mesmo, na maioria das vezes, é o valor na hora do envio

Aí o certo é usar o onSubmit no elemento form, e não o onClick no botão

function handleSubmit(evento) {
evento.preventDefault()
console.log(texto)
}

return (
<form onSubmit={handleSubmit}>
<input type="text" value={texto} onChange={handleChange} />
<button type="submit">Enviar</button>
</form>
)

E por que o preventDefault?

Porque o comportamento padrão do navegador ao enviar um formulário é recarregar a página

Sem ele o seu state some junto com o reload e parece que o código "não funcionou" haha

Usando o onSubmit você ainda ganha de graça o envio pelo Enter do teclado, que o onClick no botão não te dá

E quando não é input de texto?

Checkbox é a pegadinha clássica: o valor útil dele não está em value, está em checked, que é um booleano

<input
type="checkbox"
name="aceito"
checked={form.aceito}
onChange={(evento) => setForm({ ...form, aceito: evento.target.checked })}
/>

Select e textarea seguem a mesma lógica do input de texto: value no elemento e onChange atualizando o state

No radio o value é o mesmo do grupo, o que muda é qual deles está checked

E dá pra resolver tudo com um handler só, é só olhar o type antes de decidir o que salvar:

const { name, value, type, checked } = evento.target
setForm(anterior => ({
...anterior,
}))

O input de arquivo é o único fora da festa: nele o que vem é evento.target.files, e ele não pode ser controlado por value

Erros comuns na hora de pegar o valor do input:

O input não deixa digitar

Você passou value sem onChange, então o React trava o campo no valor do state e nada muda na tela

Aviso de componente controlado virando não controlado

Acontece quando o state nasce como undefined, tipo useState() sem nada dentro

Inicialize com string vazia e o aviso some

O console.log mostra o valor ANTIGO depois do set

O state não muda na mesma linha, a atualização aparece na próxima renderização

Se você precisa do valor ali na hora, usa o evento.target.value direto

Já me ferrei com esse terceiro e fiquei um tempão achando que o onChange estava quebrado kkk

Perguntas frequentes:

Como pegar o valor de um input no React sem usar state?

Com useRef: você liga a ref no atributo ref do input e lê inputRef.current.value só no momento que precisar, tipo no clique de um botão

Qual a diferença entre value e defaultValue?

value amarra o campo ao state (controlado), defaultValue só define o valor inicial e deixa o DOM cuidar do resto (não controlado)

Como pegar o valor de vários inputs de uma vez?

Como limpar o input depois do envio?

Se for controlado, basta voltar o state pra string vazia dentro do handleSubmit e a tela acompanha sozinha

Uma coisa mudou bastante desde que esse conteúdo foi escrito: hoje é comum pedir o formulário pronto pro assistente de IA e só colar o resultado no projeto

Funciona, e é exatamente por isso que entender o que está rolando ali embaixo continua valendo

O checklist rápido pra revisar quando o código vem pronto:

o input está controlado (value junto com onChange) ou é ref mesmo?

o state inicial é string vazia, e não undefined?

o envio está no onSubmit do form, com preventDefault?

os campos têm name, senão o handler genérico não funciona

Passou nesses quatro, tá de boa =)

Até o próximo post!