Ant Design: 为 Form 的 List 赋予默认值

2024-01-27 19:34:11

在软件开发中，特别是前端开发中，Form是一个非常常见的组件，它允许用户输入数据，并将其发送到服务器或保存到本地。List则是一个可以动态添加和删除子组件的容器组件，在Form中使用List可以方便地实现动态表单的功能。

Ant Design的Form组件提供了强大的功能，可以轻松地创建复杂的表单。List组件也是如此，它提供了多种属性和方法来控制List的行为。但是，当您需要在Form的List中设置默认值时，可能会遇到一些挑战。

Ant Design的Form组件没有提供直接设置List默认值的方法。这可能是因为Ant Design的开发者认为，在大多数情况下，List的默认值应该由应用程序的业务逻辑来决定。但是，在某些情况下，您可能确实需要在Form的List中设置默认值。

例如，您可能有一个表单，其中包含一个List，用户可以在其中添加多个子项。每个子项都有一个名称和一个值。您希望在表单加载时，List中已经包含一些默认子项。

要实现这个需求，您可以使用Form.useForm() hook。Form.useForm() hook可以让你访问Form组件的状态和方法，包括表单的字段值。

以下是如何使用Form.useForm() hook来在Form的List中设置默认值：

import React, { useState, useEffect } from "react";
import { Form, List, Input, Button } from "antd";

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

  useEffect(() => {
    form.setFieldsValue({
      list: [
        { name: "Item 1", value: "Value 1" },
        { name: "Item 2", value: "Value 2" },
      ],
    });
  }, []);

  return (
    <Form form={form}>
      <List name="list">
        {(fields, { add, remove }) => {
          return (
            <>
              {fields.map((field, index) => (
                <List.Item key={field.key}>
                  <Input {...field} placeholder="Name" />
                  <Input {...field} placeholder="Value" />
                  <Button onClick={() => remove(field.name)}>删除</Button>
                </List.Item>
              ))}
              <Button onClick={() => add()}>添加</Button>
            </>
          );
        }}
      </List>
      <Button type="primary" htmlType="submit">
        提交
      </Button>
    </Form>
  );
};

export default MyForm;