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!