基于Ant Design在Next.js中实现动态表单内容字段添加

核心方案：Ant Design Form.List组件 #

Ant Design的Form.List是专门为动态增减表单项设计的内置组件，完全不需要手动用useState维护字段数组，它会自动管理字段的添加、删除和状态同步，完美适配你的需求。

实现步骤 #

1. 初始化Form实例：用Ant Design的useForm钩子创建表单实例，用于统一管理表单状态。
2. 替换单个输入框为Form.List：将原来的单个content文本域替换为Form.List，设置name="content"（对应最终提交JSON里的content数组字段）。
3. 渲染动态表单项：通过Form.List提供的fields数组遍历渲染每个输入框，每个field的name属性直接绑定到Form.Item的name上，自动生成索引式命名（如[0]、[1]），提交时会自动转换为数组结构。
4. 添加/删除操作：用Form.List提供的add方法实现「添加更多内容」按钮，用remove方法实现单个输入框的删除（可选）。

完整代码示例 #

'use client'; // Next.js App Router 需添加该指令
import { Form, Input, Button, Space } from 'antd';
import { useForm } from 'antd/es/form/Form';

const ArticleForm = () => {
  const [form] = useForm();

  const onFinish = (values) => {
    // 默认提交结构：{ title: string, subtitle: string, content: string[] }
    console.log('提交的原始数据:', values);
    
    // 若需将content转为带content2、content3键的对象数组（可选）
    const transformedContent = values.content.map((item, index) => ({
      [`content${index + 1}`]: item
    }));
    const finalData = {
      ...values,
      content: transformedContent
    };
    console.log('转换后的数据:', finalData);
  };

  return (
    <Form form={form} onFinish={onFinish} layout="vertical">
      <Form.Item
        name="title"
        label="标题"
        rules={[{ required: true, message: '请输入标题' }]}
      >
        <Input placeholder="请输入文章标题" />
      </Form.Item>

      <Form.Item
        name="subtitle"
        label="副标题"
        rules={[{ required: true, message: '请输入副标题' }]}
      >
        <Input placeholder="请输入文章副标题" />
      </Form.Item>

      {/* 动态内容输入框区域 */}
      <Form.List name="content">
        {(fields, { add, remove }) => (
          <>
            {fields.map(({ key, name, ...restField }) => (
              <Space key={key} style={{ display: 'flex', marginBottom: 16 }} align="baseline">
                <Form.Item
                  {...restField}
                  name={name}
                  rules={[{ required: true, message: '请输入内容' }]}
                  label={`内容${name + 1}`}
                >
                  <Input.TextArea rows={4} placeholder="请输入内容" />
                </Form.Item>
                {fields.length > 1 && (
                  <Button type="text" danger onClick={() => remove(name)}>
                    删除
                  </Button>
                )}
              </Space>
            ))}
            <Form.Item>
              <Button type="dashed" onClick={() => add()} block>
                添加更多内容
              </Button>
            </Form.Item>
          </>
        )}
      </Form.List>

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

export default ArticleForm;

方案优势 #

• 无需手动维护状态：Form.List自动处理字段数组的增删、状态同步，省去自己写useState管理数组长度和name命名的麻烦。
• 内置表单校验支持：可以直接给每个动态表单项添加校验规则，组件会自动处理校验逻辑。
• 提交结构灵活适配：默认提交的content就是数组，完全符合你需要的JSON结构；如果一定要content是带content2、content3键的对象数组，只需在提交时做简单转换即可（示例已包含该逻辑）。
• Next.js无缝兼容：在App Router下只需添加'use client'指令，完全适配Next.js的SSR/SSG场景。

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