function App() { const [formData, setFormData] = useState({ name: '', email: '', age: '', gender: '', interests: [], message: '' }) const [errors, setErrors] = useState({}) const [isSubmitted, setIsSubmitted] = useState(false) // 验证函数 const validateForm = () => { const newErrors = {} if (!formData.name.trim()) { newErrors.name = '姓名不能为空' } if (!formData.email.trim()) { newErrors.email = '邮箱不能为空' } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) { newErrors.email = '邮箱格式不正确' } if (!formData.age.trim()) { newErrors.age = '年龄不能为空' } else if (isNaN(Number(formData.age)) || Number(formData.age) < 1 || Number(formData.age) > 120) { newErrors.age = '请输入有效的年龄 (1-120)' } if (!formData.message.trim()) { newErrors.message = '留言不能为空' } else if (formData.message.length < 10) { newErrors.message = '留言至少需要10个字符' } return newErrors } // 处理输入变化 const handleInputChange = (e) => { const { name, value } = e.target setFormData(prev => ({ ...prev, [name]: value })) // 清除对应字段的错误 if (errors[name]) { setErrors(prev => ({ ...prev, [name]: undefined })) } } // 处理复选框变化 const handleCheckboxChange = (interest) => { setFormData(prev => ({ ...prev, interests: prev.interests.includes(interest) ? prev.interests.filter(i => i !== interest) : [...prev.interests, interest] })) } // 提交表单 const handleSubmit = (e) => { e.preventDefault() const newErrors = validateForm() setErrors(newErrors) if (Object.keys(newErrors).length === 0) { setIsSubmitted(true) console.log('表单提交成功:', formData) } } // 重置表单 const resetForm = () => { setFormData({ name: '', email: '', age: '', gender: '', interests: [], message: '' }) setErrors({}) setIsSubmitted(false) } if (isSubmitted) { return (

✅

提交成功！

提交的信息：

姓名: {formData.name}

邮箱: {formData.email}

年龄: {formData.age}

性别: {formData.gender || '未选择'}

兴趣: {formData.interests.join(', ') || '无'}

留言: {formData.message}

) } return (

表单处理示例

{/* 姓名 */}

姓名 * {errors.name && (

{errors.name}

)}

{/* 邮箱 */}

邮箱 * {errors.email && (

{errors.email}

)}

{/* 年龄 */}

年龄 * {errors.age && (

{errors.age}

)}

{/* 性别 */}

性别

{/* 兴趣爱好 */}

兴趣爱好

{['编程', '阅读', '运动', '音乐', '旅行'].map(interest => ( handleCheckboxChange(interest)} className="mr-2" /> {interest} ))}

{/* 留言 */}

留言 *