如何在antd-form-builder中实现动态增减表单项？

要实现类似Ant Design官方的动态增减表单项功能，你可以通过维护动态表单项的状态数组，结合antd-form-builder生成对应表单项，同时添加增减按钮修改数组状态。以下是具体实现方案：

实现思路 #

• 用useState存储动态表单项的元数据数组，每个元素对应FormBuilder所需的meta配置
• 编写添加/删除函数，修改状态数组来控制表单项数量
• 遍历状态数组渲染对应的FormBuilder组件
• 绑定增减按钮的操作逻辑

完整代码 #

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

export default () => {
  // 初始化动态表单项数组，默认包含一个表单项
  const [dynamicItems, setDynamicItems] = useState([
    { key: 'dynamic_0', placeholder: '动态表单项' }
  ])

  const handleFinish = useCallback(values => {
    console.log('Submit: ', values)
  }, [])

  // 添加新的动态表单项
  const addDynamicItem = () => {
    const newKey = `dynamic_${dynamicItems.length}`
    setDynamicItems([...dynamicItems, { key: newKey, placeholder: '动态表单项' }])
  }

  // 删除指定索引的动态表单项
  const removeDynamicItem = (index) => {
    const newItems = [...dynamicItems]
    newItems.splice(index, 1)
    setDynamicItems(newItems)
  }

  return (
    <Form layout="vertical" onFinish={handleFinish}>
      {/* 原有固定表单项 */}
      <FormBuilder meta={{ key: 'username', placeholder: 'Username' }} />
      <FormBuilder meta={{ key: 'password', widget: 'password', placeholder: 'Password' }} />

      {/* 动态生成的表单项 */}
      {dynamicItems.map((item, index) => (
        <Space key={item.key} style={{ width: '100%', marginBottom: 8 }}>
          <FormBuilder meta={item} style={{ flex: 1 }} />
          {/* 仅当表单项数量大于1时显示删除按钮 */}
          {dynamicItems.length > 1 && (
            <Button onClick={() => removeDynamicItem(index)} danger>删除</Button>
          )}
        </Space>
      ))}

      {/* 添加表单项按钮 */}
      <Button type="dashed" onClick={addDynamicItem} style={{ marginBottom: 16 }}>
        添加表单项
      </Button>

      <Form.Item>
        <Button htmlType="submit" type="primary">
          提交
        </Button>
      </Form.Item>
    </Form>
  )
}

关键说明 #

• 表单布局改为vertical更适配多表单项展示，可根据需求改回inline
• 每个动态表单项的key保证唯一，避免React渲染警告
• 删除按钮仅在表单项数量大于1时显示，防止误删最后一项
• 提交时所有表单项（含动态项）的值会被统一收集到values对象中，键名为配置里的key字段

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