React表单处理实战代码

下面给你一个实用且较完整的React表单处理示例，涵盖：

• 受控组件（Controlled Components）

• 表单验证（同步和异步）

• 动态字段（如数组字段）

• 错误提示

• 提交状态管理

• 复合输入控件

用法和结构非常接近真实项目，代码清晰且容易拓展，适合中高级程序员参考。

import React, { useState } from 'react';

// 简单邮箱校验
const validateEmail = (email) => {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
};

// 模拟异步用户名校验（是否已被占用）
const checkUsernameExists = (username) => {
  return new Promise((resolve) => {
    setTimeout(() =