Formulários em React

Formulários em React são usados para capturar dados do usuário e processá-los. Existem duas formas principais de trabalhar com formulários:

Formulários controlados: Cada campo é vinculado ao estado do componente, garantindo controle total sobre os dados.
Formulários não controlados: Os dados são manipulados diretamente pelo DOM, usando referências (refs).

Gerenciando Inputs com Estado

Estados são frequentemente usados em formulários para controlar inputs e manipular dados enviados pelo usuário.

Exemplo 1

Este exemplo mostra como capturar o nome do usuário usando um estado simples em um formulário controlado.


import React, { useState } from "react";

function FormularioControlado() {
  const [nome, setNome] = useState("");

  const handleChange = (e) => {
    setNome(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Olá, ${nome}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Escreva aqui o seu nome:
        <input
          type="text"
          value={nome}
          onChange={handleChange}
        />
      </label>
      <button type="submit">Enviar</button>
    </form>
  );
}

export default FormularioControlado;

Exemplo 2

Neste exemplo, capturamos os valores de vários campos (nome e e-mail) usando um estado representado como um objeto.


import React, { useState } from "react";

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

  const handleChange = (e) => {
    const { name, value } = e.target; // Extrai o nome e valor do campo
    setFormData({ ...formData, [name]: value }); // Atualiza o campo correspondente no estado
  };

  const handleSubmit = (e) => {
    e.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>
      <br />
      <label>
        Email:
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
      </label>
      <br />
      <button type="submit">Enviar</button>
    </form>
  );
}

export default FormularioMultiCampos;

Benefícios de Formulários Controlados

Trabalhar com formulários controlados em React oferece as seguintes vantagens:

Sincronização direta com o estado: Permite controle total sobre os valores dos campos.
Validação facilitada: Validações podem ser realizadas diretamente ao atualizar o estado.
Integração com APIs: Fácil envio de dados para backends ou serviços externos.

Usando Validadores

Adicione validação para garantir que os dados inseridos pelos usuários atendam aos critérios exigidos.

          
import React, { useState } from 'react';

const FormWithValidation = () => {
  const [formData, setFormData] = useState({ name: '', email: '' });
  const [errors, setErrors] = useState({ name: '', email: '' });

  const validate = () => {
    const newErrors = {};
    if (!formData.name) newErrors.name = 'Nome é obrigatório';
    if (!formData.email) {
      newErrors.email = 'Email é obrigatório';
    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
      newErrors.email = 'Email inválido';
    }
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (validate()) {
      alert('Formulário enviado!');
    }
  };

  return (
    <form;onSubmit={handleSubmit}>
      <div>
        <label>
          Nome:
          <input
          type="text"
          value={formData.name}
            onChange={(e) =>
              setFormData({ ...formData, name: e.target.value })
              />
              </label>
              {errors.name && <span>{errors.name}</span>}
              </div>
      <div>
      <label>
          Email:
          <input
            type="email"
            value={formData.email}
            onChange={(e) =>
              setFormData({ ...formData, email: e.target.value })
            />
        </label>
        {errors.email && <span>{errors.email}</span>}
      </div>
      <button type="submit">Enviar<button>
    
  );
}

export default FormWithValidation;

Passar Dados de um Formulário para Outro

Use props para passar dados entre componentes pai e filho.

Exemplo:


import React, { useState } from 'react';

const ParentForm = () => {
  const [parentData, setParentData] = useState('');

  return (
    <div>
      <h1>Formulário Pai</h1>
      <ChildForm onFormSubmit={(data) => setParentData(data)} />
      <h2>Dados Recebidos do Filho: {parentData}</h2>
    </div>
  );
}

const ChildForm = ({ onFormSubmit }) => {
  const [childData, setChildData] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    onFormSubmit(childData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={childData}
        onChange={(e) => setChildData(e.target.value)}
        placeholder="Digite algo"
      />
      <button type="submit">Enviar ao Pai<button>
    
  );
}

export default ParentForm;

Como Usar Elementos de Formulários com Material-UI em React

Material-UI (MUI) é uma biblioteca popular de componentes React que segue os princípios de design do Google Material Design. Ela oferece componentes pré-estilizados para criar interfaces modernas e responsivas. Quando se trata de formulários, o MUI fornece componentes como <TextField>, <Checkbox>, e <Select>, tornando mais fácil estilizar e gerenciar elementos de formulário.

Exemplo 1

Este exemplo mostra como criar um campo de texto básico e capturar os dados digitados pelo usuário.


import React, { useState } from "react";
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";

function FormularioTexto() {
  const [nome, setNome] = useState("");

  const handleChange = (e) => {
    setNome(e.target.value); // Atualiza o estado com o valor do campo
  };

  const handleSubmit = () => {
    alert(\`Nome enviado: \${nome}\`);
  };

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "10px", width: "300px" }}>
      <TextField
        label="Nome"
        variant="outlined"
        value={nome}
        onChange={handleChange}
      />
      <Button variant="contained" color="primary" onClick={handleSubmit}>
        Enviar
      </Button>
    </div>
  );
}

export default FormularioTexto;

Exemplo 2

Este exemplo demonstra como usar um checkbox e um campo de seleção no Material-UI.


import React, { useState } from "react";
import { FormControl, InputLabel, MenuItem, Select, Checkbox, FormControlLabel, Button } from "@mui/material";

function FormularioSelectCheckbox() {
  const [opcao, setOpcao] = useState("");
  const [aceito, setAceito] = useState(false);

  const handleSelectChange = (e) => {
    setOpcao(e.target.value); // Atualiza a opção selecionada
  };

  const handleCheckboxChange = (e) => {
    setAceito(e.target.checked); // Atualiza o estado do checkbox
  };

  const handleSubmit = () => {
    alert(\`Opção: \${opcao}, Aceito: \${aceito}\`);
  };

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "15px", width: "300px" }}>
      <FormControl fullWidth>
        <InputLabel>Opções</InputLabel>
        <Select value={opcao} onChange={handleSelectChange}>
          <MenuItem value="opcao1">Opção 1</MenuItem>
          <MenuItem value="opcao2">Opção 2</MenuItem>
          <MenuItem value="opcao3">Opção 3</MenuItem>
        </Select>
      </FormControl>

      <FormControlLabel
        control=<Checkbox checked={aceito} onChange={handleCheckboxChange} />
        label="Aceito os termos"
      />

      <Button variant="contained" color="primary" onClick={handleSubmit}>
        Enviar
      </Button>
    </div>
  );
}

export default FormularioSelectCheckbox;

Benefícios do Uso do Material-UI em Formulários

Trabalhar com formulários no Material-UI oferece as seguintes vantagens:

Estilização pronta: Todos os componentes seguem o Material Design.
Flexibilidade: Fácil customização para atender às necessidades do projeto.
Integração com validações: Pode ser usado com bibliotecas de validação como Formik ou React Hook Form.