管理多个表单，在一个页面视图中按下一个表单进行验证

import React, { useState } from 'react';

const FormComponent = () => {
  const [activeForm, setActiveForm] = useState('form1');
  const [formData, setFormData] = useState({ form1: {}, form2: {} });
  const [errors, setErrors] = useState({ form1: {}, form2: {} });

  const validateForm = (formName) => {
    let formErrors = {};
    // 根据表单名称进行相应的验证逻辑
    if (formName === 'form1') {
      if (!formData.form1.name) formErrors.name = 'Name is required';
    } else if (formName === 'form2') {
      if (!formData.form2.email) formErrors.email = 'Email is required';
    }
    setErrors({ ...errors, [formName]: formErrors });
    return Object.keys(formErrors).length === 0;
  };

  const handleSubmit = (e, formName) => {
    e.preventDefault();
    if (validateForm(formName)) {
      console.log('Form submitted:', formData[formName]);
      // 这里可以进行实际的提交操作
    }
  };

  return (
    <div>
      <button onClick={() => setActiveForm('form1')}>Form 1</button>
      <button onClick={() => setActiveForm('form2')}>Form 2</button>

      {activeForm === 'form1' && (
        <form onSubmit={(e) => handleSubmit(e, 'form1')}>
          <input
            type="text"
            placeholder="Name"
            value={formData.form1.name || ''}
            onChange={(e) => setFormData({ ...formData, form1: { ...formData.form1, name: e.target.value } })}
          />
          {errors.form1.name && <p>{errors.form1.name}</p>}
          <button type="submit">Submit Form 1</button>
        </form>
      )}

      {activeForm === 'form2' && (
        <form onSubmit={(e) => handleSubmit(e, 'form2')}>
          <input
            type="email"
            placeholder="Email"
            value={formData.form2.email || ''}
            onChange={(e) => setFormData({ ...formData, form2: { ...formData.form2, email: e.target.value } })}
          />
          {errors.form2.email && <p>{errors.form2.email}</p>}
          <button type="submit">Submit Form 2</button>
        </form>
      )}
    </div>
  );
};

export default FormComponent;

setErrors((prevErrors) => ({ ...prevErrors, [formName]: formErrors }));