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

Como pegar valor de input com React capa

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!

Inscrever-se
Notificar de
guest

0 Comentários
mais antigos
mais recentes Mais votado
Feedbacks embutidos
Ver todos os comentários