基于切换开关的React提交验证

import React, { useState } from 'react';

function ToggleForm() {
  const [isEnabled, setIsEnabled] = useState(false);
  const [formData, setFormData] = useState({ name: '', email: '' });
  const [errors, setErrors] = useState({});

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

  const handleToggle = () => {
    setIsEnabled(!isEnabled);
    setErrors({}); // Reset errors when toggle changes
  };

  const validate = () => {
    let formErrors = {};
    if (!formData.name) {
      formErrors.name = 'Name is required';
    }
    if (!formData.email) {
      formErrors.email = 'Email is required';
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
      formErrors.email = 'Invalid email format';
    }
    return formErrors;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (isEnabled) {
      const formErrors = validate();
      if (Object.keys(formErrors).length === 0) {
        alert('Form submitted successfully!');
      } else {
        setErrors(formErrors);
      }
    } else {
      alert('Please enable the feature to submit the form.');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Enable Feature:
        <input type="checkbox" checked={isEnabled} onChange={handleToggle} />
      </label>
      {isEnabled && (
        <>
          <div>
            <label>Name:</label>
            <input type="text" name="name" value={formData.name} onChange={handleChange} />
            {errors.name && <p style={{ color: 'red' }}>{errors.name}</p>}
          </div>
          <div>
            <label>Email:</label>
            <input type="email" name="email" value={formData.email} onChange={handleChange} />
            {errors.email && <p style={{ color: 'red' }}>{errors.email}</p>}
          </div>
        </>
      )}
      <button type="submit">Submit</button>
    </form>
  );
}

export default ToggleForm;