Como pegar dados de formulário no React JS

Neste artigo você aprenderá a como pegar dados de formulário no React, isso é necessário para validações, por exemplo

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

Os formulários são uma parte integral de muitas aplicações web.

Seja para coletar informações do usuário, receber feedback ou processar transações, a habilidade de pegar e manipular dados de formulários é crucial.

No ambiente React JS, trabalhar com formulários pode ser um pouco diferente de outras abordagens tradicionais de JavaScript, mas, graças às características declarativas do React, esse processo é simplificado e eficiente.

Neste artigo, exploraremos como pegar dados de formulários em React JS.

O Conceito de Estados em React

Antes de mergulhar nos detalhes de como pegar dados de formulários, é essencial entender o conceito de estados (state) em React.

O estado de um componente é um objeto que armazena valores que podem mudar ao longo do tempo e causar uma re-renderização do componente.

Criando um Formulário Simples em React

Para demonstrar como pegar dados, vamos começar com um exemplo básico de um formulário:

import React, { useState } from 'react';

function FormularioSimples() {
  const [nome, setNome] = useState('');
  
  const handleSubmit = (event) => {
    event.preventDefault();
    console.log("Nome submetido:", nome);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Nome:
        <input type="text" value={nome} onChange={(e) => setNome(e.target.value)} />
      </label>
      <button type="submit">Enviar</button>
    </form>
  );
}

Neste exemplo, usamos o hook useState para criar uma variável de estado nome e a função setNome para atualizar seu valor.

Como Pegar Dados de Inputs

Os elementos do formulário em React, como input, textarea e select, precisam que seus estados sejam controlados por funções.

Vamos explorar como pegar dados desses inputs:

Inputs de Texto

Como visto no exemplo anterior, pegar dados de um input de texto é realizado usando o atributo value para ligar o input a uma variável de estado e o evento onChange para atualizar o valor dessa variável.

Checkbox e Radiobuttons

Para pegar dados de checkboxes e radiobuttons, a abordagem é um pouco diferente:

const [aceitaTermos, setAceitaTermos] = useState(false);

<input type="checkbox" checked={aceitaTermos} onChange={(e) => setAceitaTermos(e.target.checked)} />

Select (Dropdown)

Para dropdowns, podemos usar o evento onChange da mesma forma que com outros inputs:

const [cidade, setCidade] = useState('');

<select value={cidade} onChange={(e) => setCidade(e.target.value)}>
  <option value="SaoPaulo">São Paulo</option>
  <option value="RioDeJaneiro">Rio de Janeiro</option>
</select>

Trabalhando com Múltiplos Campos

Quando você tem um formulário com vários campos, pode ser tentador criar um estado para cada campo.

No entanto, uma abordagem mais eficiente é usar um único objeto estado:

const [formData, setFormData] = useState({
  nome: '',
  email: '',
  cidade: ''
});

const handleChange = (e) => {
  const value = e.target.value;
  setFormData({
    ...formData,
    [e.target.name]: value
  });
}

Usando essa abordagem, você pode ligar múltiplos campos a um único handler de mudança, economizando código e tornando a lógica mais clara.

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

Conclusão

Chegamos ao fim do artigo sobre como pegar dados de formulário no React!

Trabalhar com formulários em React é simples e eficiente quando você entende o conceito de estados e controla os elementos do formulário.

Com a prática e a familiaridade com as peculiaridades de cada tipo de input, você será capaz de construir formulários robustos e eficientes em seus projetos React.

A abordagem declarativa do React oferece uma experiência de desenvolvimento intuitiva e facilita a coleta e validação de dados de formulário.

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