Formulários em React

Os formulários no React permitem capturar dados do usuário. Eles podem ser controlados ou não controlados, dependendo de como o estado do formulário é gerenciado.

Formulário com 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.

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;