How to show the first item by default in a dynamic Antd form?

在使用Antd（Ant Design）的React组件库时，如果您想在动态表单中默认显示第一个项目，那么您可以利用Antd的Form和Form.Item组件，并结合使用initialValues属性来实现默认值的设置。这里以一个简单的表单为例，用于添加用户的邮箱地址，我们将在动态添加的表单项中默认显示第一个项目。

首先，确保您已经正确安装并导入了Antd库和所需的组件：

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

下面是具体的实现步骤：

1. 设置Form组件

创建一个React组件，并使用Form标签来初始化表单。使用initialValues属性为表单项设置默认值：

javascript
const DynamicForm = () => {
  const [form] = Form.useForm();

  return (
    <Form form={form} name="dynamic_form" initialValues={{ users: [{ email: '' }] }}>
      {/* 动态表单项将会被放置在这里 */}
    </Form>
  );
};

2. 添加动态表单项

使用Form.List来处理动态表单项。这个组件能够让用户动态的添加或删除表单项。在Form.List内部，您可以通过映射字段（fields）来渲染每个动态表单项。使用initialValues设置的默认值将自动填充到第一项：

javascript
<Form.List
  name="users"
  initialValue={[{ email: 'example@domain.com' }]}  // 默认值设置
>
  {(fields, { add, remove }) => (
    <>
      {fields.map(({ key, name, fieldKey, ...restField }) => (
        <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
          <Form.Item
            {...restField}
            name={[name, 'email']}
            fieldKey={[fieldKey, 'email']}
            rules={[{ required: true, message: '请输入邮箱地址' }]}
          >
            <Input placeholder="邮箱地址" />
          </Form.Item>
          <MinusCircleOutlined onClick={() => remove(name)} />
        </Space>
      ))}
      <Form.Item>
        <Button type="primary" onClick={() => add()} icon={<PlusOutlined />}>
          添加邮箱
        </Button>
      </Form.Item>
    </>
  )}
</Form.List>

3. 完善组件并测试

现在，您已经设置了一个带有动态添加和删除功能的表单项，且第一个表单项默认显示了预设的邮箱地址。可以通过提交表单来检查所有的输入值。

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

将此组件添加到您的应用中并进行测试，确保一切按预期工作。

结论

通过上述步骤，您可以在使用Antd的动态表单中为第一个项目设置默认值。这不仅提高了用户体验，还能减少用户的输入工作量，特别是在表单项可能非常多或复杂时。在企业级应用中，这种动态表单的使用非常普遍，有效地管理动态表单状态和数据流是非常重要的。