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} />
);
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.