React中能否通过按钮单独获取部分表单字段并提交全量数据？

核心思路 #

通过React状态管理多组账户信息数组，点击「Add account info」时收集当前账户字段值并加入数组，提交表单时将基础表单数据与账户数组合并后发送到服务器。

修改后的完整代码 #

import React, { useState, useCallback } from 'react'
import { Form, Button } from 'antd'
import FormBuilder from 'antd-form-builder'

export default () => {
  const [form] = Form.useForm()
  // 存储多组账户信息的状态
  const [accountInfo, setAccountInfo] = useState([])

  // 处理添加账户信息的逻辑
  const handleAddAccount = useCallback(async () => {
    try {
      // 验证当前账户字段的输入规则
      const accountValues = await form.validateFields(['email', 'security', 'answer'])
      // 转换为需求指定的格式
      const newAccount = {
        email: accountValues.email,
        securityQuestion: accountValues.security,
        securityAnswer: accountValues.answer
      }
      // 将新账户信息加入数组
      setAccountInfo(prev => [...prev, newAccount])
      // 清空当前账户输入框，方便添加下一组
      form.resetFields(['email', 'security', 'answer'])
    } catch (errorInfo) {
      console.log('账户字段验证失败:', errorInfo)
    }
  }, [form])

  // 处理表单提交
  const handleFinish = useCallback((values) => {
    // 合并基础表单数据和账户信息数组
    const submitData = {
      ...values,
      accountInfo: accountInfo
    }
    console.log('提交的完整数据:', submitData)
    // 替换为实际的服务器请求逻辑
    // await fetch('/api/submit-form', {
    //   method: 'POST',
    //   body: JSON.stringify(submitData),
    //   headers: { 'Content-Type': 'application/json' }
    // })
  }, [accountInfo])

  const meta1 = [
    { key: 'name.first', label: 'First Name', required: true },
    { key: 'name.last', label: 'Last Name', required: true },
    { key: 'dob', label: 'Date of Birth', widget: 'date-picker' },
  ]
  const meta2 = [
    {
      key: 'email',
      label: 'Email',
      rules: [{ type: 'email', message: 'Invalid email' }],
    },
    {
      key: 'security',
      label: 'Security Question',
      widget: 'select',
      placeholder: 'Select a question...',
      options: [{label: "What's your pet's name?", value: 1 }, {label: 'Your nick name?', value:2}],
    },
    { key: 'answer', label: 'Security Answer' },
  ]
  const meta3 = {
    fields: [
      { key: 'address', label: 'Address' },
      { key: 'city', label: 'City' },
      { key: 'phone', label: 'phone' },
    ],
  }

  return (
    <Form layout="horizontal" form={form} onFinish={handleFinish} style={{ width: '500px' }}>
      <fieldset>
        <legend>Personal Information</legend>
        <FormBuilder form={form} meta={meta1} />
      </fieldset>
      <fieldset>
        <legend>Account Information</legend>
        <FormBuilder form={form} meta={meta2} />
        <Form.Item wrapperCol={{ span: 16, offset: 8 }}>
          <Button type="primary" onClick={handleAddAccount}>
            Add account info
          </Button>
          {/* 可选：展示已添加的账户列表 */}
          {accountInfo.length > 0 && (
            <div style={{ marginTop: 10 }}>
              <h4>已添加账户:</h4>
              <ul>
                {accountInfo.map((item, index) => (
                  <li key={index}>
                    邮箱: {item.email}, 问题ID: {item.securityQuestion}
                  </li>
                ))}
              </ul>
            </div>
          )}
        </Form.Item>
      </fieldset>
      <fieldset>
        <legend>Contact Infomation</legend>
        <FormBuilder form={form} meta={meta3} />
      </fieldset>
      <Form.Item className="form-footer" wrapperCol={{ span: 16, offset: 8 }}>
        <Button htmlType="submit" type="primary">
          Submit
        </Button>
      </Form.Item>
    </Form>
  )
}

关键实现细节 #

• 状态管理：使用useState创建accountInfo数组，存储所有用户添加的账户信息。
• 添加验证：点击添加按钮时，先通过form.validateFields校验当前账户字段的输入合法性，避免无效数据进入数组。
• 数据格式转换：将表单收集的字段映射为需求指定的email、securityQuestion、securityAnswer结构。
• 提交整合：在表单提交时，将基础表单数据与账户信息数组合并，形成符合要求的完整提交结构。

内容的提问来源于stack exchange，提问作者Andish