Antd中Form组件动态增减嵌套字段默认展示字段

最新推荐文章于 2025-02-11 11:53:30 发布

九月萩

最新推荐文章于 2025-02-11 11:53:30 发布

阅读量2.2k

点赞数 3

分类专栏：前端文章标签： react.js antd

本文链接：https://blog.csdn.net/weixin_47091394/article/details/119677575

版权

前端专栏收录该内容

19 篇文章

订阅专栏

本文介绍了如何在Ant Design 4.16.11版本中，通过设置initialValue实现动态表单的初始状态，即页面加载时显示一行字段，包括添加和删除操作的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注意：仅针对：Antd版本号：4.16.11

Antd官方在“动态增减嵌套字段”模块，默认只展示一个添加按钮。
在这里插入图片描述
需求：进入页面默认展示一行字段。
思路：
1、我先在控制台输出“fields”,得到如下数据：

2、点击“Add field”后：

3、我想，如何初始化这个fields呢？看文档的时候看到了“form.setFieldsValue”，但并不是。之后想到初始值，于是把控制台数据构造进了initialValue中。

解决方法：使用<Form.List>中提供的initialValue参数。
关键代码展示：

<Form.List
    name="launch_scope"
    initialValue={[{
      fieldKey: 0,
      isListField: true,
      key: 0,
      name: 0
    }]}
>
    ......
</Form.List>

效果图：
在这里插入图片描述
完整代码展示：

import { Form, Input, Button, Space } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';

const Demo = () => {
  const onFinish = values => {
    console.log('Received values of form:', values);
  };

  return (
    <Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off">
      <Form.List name="users">
        {(fields, { add, remove }) => (
          <>
            {fields.map(({ key, name, fieldKey, ...restField }) => (
              <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
                <Form.Item
                  {...restField}
                  name={[name, 'first']}
                  fieldKey={[fieldKey, 'first']}
                  rules={[{ required: true, message: 'Missing first name' }]}
                >
                  <Input placeholder="First Name" />
                </Form.Item>
                <Form.Item
                  {...restField}
                  name={[name, 'last']}
                  fieldKey={[fieldKey, 'last']}
                  rules={[{ required: true, message: 'Missing last name' }]}
                >
                  <Input placeholder="Last Name" />
                </Form.Item>
                <MinusCircleOutlined onClick={() => remove(name)} />
              </Space>
            ))}
            <Form.Item>
              <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                Add field
              </Button>
            </Form.Item>
          </>
        )}
      </Form.List>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

ReactDOM.render(<Demo />, mountNode);