Aprenda a Capturar e Manipular Valores de Inputs em Formulários React

Capturando e Manipulando Inputs em Formulários React

Os formulários são uma parte essencial de muitas aplicações web, permitindo que os usuários insiram dados que podem ser processados posteriormente. Neste tutorial, vamos explorar como capturar e manipular valores de inputs em um formulário React, utilizando componentes controlados e não controlados.

Componentes Controlados

Os componentes controlados são aqueles em que o estado do input é gerenciado pelo React. Isso significa que o valor do input é definido pelo estado do componente. Vamos ver um exemplo simples:

import React, { useState } from 'react';

function MeuFormulario() {
    const [valor, setValor] = useState('');

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

    const handleSubmit = (evento) => {
        evento.preventDefault();
        alert(`Valor do input: ${valor}`);
    };

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

export default MeuFormulario;

Neste exemplo, estamos usando o hook useState para criar um estado chamado valor. A função handleChange é chamada sempre que o valor do input muda, atualizando o estado com o novo valor. Quando o formulário é enviado, exibimos o valor do input em um alerta.

Componentes Não Controlados

Por outro lado, os componentes não controlados permitem que o DOM gerencie o estado dos inputs. Isso pode ser feito usando referências (refs). Aqui está um exemplo:

import React, { useRef } from 'react';

function MeuFormulario() {
    const inputRef = useRef(null);

    const handleSubmit = (evento) => {
        evento.preventDefault();
        alert(`Valor do input: ${inputRef.current.value}`);
    };

    return (
        <form onSubmit={handleSubmit}>
            <label>
                Nome:
                <input type="text" ref={inputRef} />
            </label>
            <button type="submit">Enviar</button>
        </form>
    );
}

export default MeuFormulario;

Aqui, utilizamos a referência inputRef para acessar o valor do input diretamente do DOM, sem a necessidade de gerenciar o estado pelo React. Isso pode ser útil em algumas situações, mas geralmente, recomenda-se o uso de componentes controlados para um melhor gerenciamento de estado.

Validação de Formulários

A validação é uma parte crucial do manuseio de formulários. Podemos implementar a validação tanto nos componentes controlados quanto nos não controlados. Aqui está um exemplo de como validar um campo de input:

import React, { useState } from 'react';

function MeuFormulario() {
    const [valor, setValor] = useState('');
    const [erro, setErro] = useState('');

    const handleChange = (evento) => {
        setValor(evento.target.value);
        setErro(''); // Limpa o erro ao digitar
    };

    const handleSubmit = (evento) => {
        evento.preventDefault();
        if (!valor) {
            setErro('O campo não pode estar vazio!');
            return;
        }
        alert(`Valor do input: ${valor}`);
    };

    return (
        <form onSubmit={handleSubmit}>
            <label>
                Nome:
                <input type="text" value={valor} onChange={handleChange} />
            </label>
            {erro && <p style={{ color: 'red' }}>{erro}</p>}
            <button type="submit">Enviar</button>
        </form>
    );
}

export default MeuFormulario;

Neste código, adicionamos uma verificação para garantir que o campo não esteja vazio antes de enviar o formulário. Se estiver, exibimos uma mensagem de erro.

Manipulação de Vários Inputs

Quando trabalhamos com formulários que têm vários inputs, podemos usar um único estado para gerenciar todos eles. Aqui está um exemplo:

import React, { useState } from 'react';

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

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

    const handleSubmit = (evento) => {
        evento.preventDefault();
        alert(`Nome: ${formData.nome}, Email: ${formData.email}`);
    };

    return (
        <form onSubmit={handleSubmit}>
            <label>
                Nome:
                <input type="text" name="nome" value={formData.nome} onChange={handleChange} />
            </label>
            <label>
                Email:
                <input type="email" name="email" value={formData.email} onChange={handleChange} />
            </label>
            <button type="submit">Enviar</button>
        </form>
    );
}

export default MeuFormulario;

Aqui, estamos usando um objeto formData para armazenar os valores de múltiplos inputs, o que torna a manipulação e o envio dos dados muito mais simples.

Conclusão

Capturar e manipular valores de inputs em formulários React é uma habilidade crucial para qualquer desenvolvedor. Com a prática, você pode construir interfaces de usuário ricas e interativas que respondem rapidamente às entradas dos usuários. Experimente os exemplos acima e veja como você pode adaptar a lógica para atender às suas necessidades específicas.

Entenda a Importância da Manipulação de Inputs em React

Os formulários são uma parte vital das aplicações web, permitindo que usuários enviem informações importantes. Compreender como capturar e manipular dados de inputs é fundamental para qualquer desenvolvedor React. Neste tutorial, você aprenderá não apenas como gerenciar o estado de inputs, mas também como validar dados e lidar com múltiplos inputs de forma eficiente.

Algumas aplicações:

• Formulários de cadastro
• Formulários de login
• Formulários de feedback
• Formulários de pesquisa
• Formulários de contato

Dicas para quem está começando

• Use componentes controlados para melhor controle do estado.
• Valide sempre os inputs antes de enviar os dados.
• Utilize referências para casos onde o gerenciamento de estado não é necessário.
• Mantenha seus formulários simples e intuitivos.
• Teste frequentemente para garantir que tudo funcione como esperado.

Compartilhe este tutorial