Como pegar valor de input com React JS

Neste artigo você vai aprender a como pegar valor de input com React JS, utilizando uma simples abordagem

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

No React JS, é possível pegar o valor de um input através do atributo value do componente.

Para fazer isso utilizando um componente funcional, basta atribuir ao atributo value o valor desejado e utilizar o evento onChange para atualizar o valor do input quando ele for alterado pelo usuário.

Veja o exemplo abaixo:

import React, { useState } from 'react';

const MeuInput = () => {
  const [valor, setValor] = useState('');

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

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

Neste exemplo, criamos um componente funcional MeuInput que renderiza um input do tipo texto.

O valor inicial do input é definido pelo estado do componente (valor), que é gerenciado pelo hook useState.

Quando o usuário altera o valor do input, o evento onChange é disparado e chama a função handleChange, que atualiza o estado do componente com o novo valor do input.

Dessa forma, o valor do input sempre estará sincronizado com o estado do componente.

Conteúdo também disponível em vídeo:

Para pegar o valor do input em outro lugar do seu código, basta acessar o estado do componente MeuInput. Por exemplo:

const valorInput = meuInput.state.valor;

Com essas informações em mente, você deve ser capaz de pegar o valor de um input facilmente com o React JS utilizando um componente funcional.

Isso pode ser útil em diversas situações, como, por exemplo, ao validar ou enviar o valor do input para o servidor.

Alterando o valor de input com React JS

Ao utilizar um componente funcional para pegar o valor de um input, é importante lembrar que o estado do componente é gerenciado pelo hook useState.

Isso significa que, para atualizar o valor do input, basta chamar a função setValor com o novo valor desejado.

Veja o exemplo abaixo:

import React, { useState } from 'react';

const MeuInput = () => {
  const [valor, setValor] = useState('');

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

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

Neste exemplo, criamos um componente funcional MeuInput que renderiza um input do tipo texto.

O valor inicial do input é definido pelo estado do componente (valor), que é gerenciado pelo hook useState.

Quando o usuário altera o valor do input, o evento onChange é disparado e chama a função handleChange, que atualiza o estado do componente com o novo valor do input.

Dessa forma, o valor do input sempre estará sincronizado com o estado do componente.

Para atualizar o valor do input em outro lugar do seu código, basta chamar a função setValor com o novo valor desejado. Por exemplo:

meuInput.setValor('novo valor');

Com essas informações em mente, você deve ser capaz de pegar e atualizar o valor de um input facilmente com o React JS utilizando um componente funcional.

Isso pode ser útil em diversas situações, como, por exemplo, ao validar ou enviar o valor do input para o servidor.

Como pegar valor de input em componente de classe

Para obter o valor utilizando um componente de classe, basta atribuir ao atributo value o valor desejado e utilizar o evento onChange para atualizar o valor do input quando ele for alterado pelo usuário.

Veja o exemplo abaixo:

import React from 'react';

class MeuInput extends React.Component {
  state = {
    valor: '',
  };

  handleChange = (event) => {
    this.setState({ valor: event.target.value });
  };

  render() {
    return (
      <input
        type="text"
        value={this.state.valor}
        onChange={this.handleChange}
      />
    );
  }
}

Neste exemplo, criamos um componente de classe MeuInput que renderiza um input do tipo texto.

O valor inicial do input é definido pelo estado do componente (state.valor).

Quando o usuário altera o valor do input, o evento onChange é disparado e chama a função handleChange, que atualiza o estado do componente com o novo valor do input.

Dessa forma, o valor do input sempre estará sincronizado com o estado do componente.

Para pegar o valor do input em outro lugar do seu código, basta acessar o estado do componente MeuInput. Por exemplo:

const valorInput = meuInput.state.valor;

Com essas informações em mente, você deve ser capaz de pegar o valor de um input facilmente com o React JS utilizando um componente de classe.

Deixe um comentário contando o que achou deste artigo 🙂

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

Conclusão

Neste artigo você aprendeu a como pegar valor de input com React JS

Utilizamos duas abordagens:

• componente funcional;
• componente de classe;

Qual você vai utilizar depende de como sua aplicação foi estruturada, mas ambos códigos funcionam perfeitamente para resolver seu problema! 🙂

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!

Adicionar uma seção ‘Como pegar valor de vários inputs em um formulário React’ mostrando o padrão de um único estado em objeto e um handleChange genérico que usa o atributo name do input pra saber qual campo atualizar. Explica o porquê antes do como: em um formulário real você não quer um useState pra cada campo, isso vira um inferno de repetição. Estrutura sugerida (respeitando o ritmo do post: explica, mostra o código, explica de novo):

Em um formulário de verdade você tem vários inputs, e criar um estado separado pra cada um não escala

O truque é usar um único estado do tipo objeto e um handleChange que descobre qual campo mudar pelo atributo name

[bloco de código]

import React, { useState } from ‘react’;

const MeuFormulario = () => { ”, email: ” });

const handleChange = (event) => { };

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

Repara que o mesmo handleChange serve pros dois inputs

Assim tu adiciona quantos campos quiser sem duplicar função nenhuma

Adicionar ‘Como pegar o valor do input no envio do formulário (onSubmit)’ mostrando o event.preventDefault() e o acesso ao estado no momento do submit. É onde a maioria realmente quer usar o valor. Estrutura:

Na prática, o momento que tu quer o valor do input é na hora de enviar o formulário

Pra isso a gente usa o evento onSubmit no form e o event.preventDefault() pra evitar o recarregamento da página

[bloco de código]

const handleSubmit = (event) => { event.preventDefault(); console.log(valor); };

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

Tome cuidado: se esquecer o preventDefault, a página recarrega e tu perde o valor antes de conseguir usar

Com o estado já sincronizado pelo onChange, no submit é só ler a variável valor e mandar pro teu backend, validar, o que precisar

Adicionar ‘E se eu não quiser controlar o input pelo estado? (useRef)’ apresentando a alternativa de input não controlado com useRef, e explicando quando faz sentido. Estrutura:

Existe um outro caminho pra pegar o valor do input sem passar pelo useState: o hook useRef

Nesse caso o input não é controlado pelo estado, tu só acessa o valor direto quando precisa

[bloco de código]

import React, { useRef } from ‘react’;

const MeuInput = () => { const inputRef = useRef();

const handleClick = () => { console.log(inputRef.current.value); };

return ( <> <input type="text" ref={inputRef} /> <button onClick={handleClick}>Pegar valor</button> </> ); };

A diferença: com useState o React re-renderiza a cada tecla e o input fica sincronizado com o estado (input controlado)

Com useRef tu só lê o valor no momento que quiser, sem re-render a cada digitação (input não controlado)

Pra formulário simples ou quando performance importa, o useRef é uma mão na roda

Adicionar um bloco de perguntas rápidas, cada H3 respondendo sozinho como snippet:

H3 ‘Qual a diferença entre input controlado e não controlado no React?’ Input controlado é aquele cujo value vem do estado (useState) e é atualizado no onChange, então o React é a fonte da verdade. Não controlado é quando o próprio DOM guarda o valor e tu acessa via useRef quando precisa.

H3 ‘Preciso do onChange pra pegar o valor do input?’ Se o input é controlado (usa value={estado}), sim: sem o onChange o campo fica travado e não atualiza. Se tu for pela via do useRef, o onChange não é obrigatório, tu lê o valor direto pela ref.

H3 ‘Como limpar o input depois de pegar o valor?’ Basta setar o estado de volta pra string vazia, por exemplo setValor(”). Como o input é controlado, ele reflete o estado na hora e o campo fica em branco.