Form.List 动态表单项目实战：从零开始的详细教程-原创手记-慕课网

本文将详细介绍如何使用Form.List组件实现动态表单项目实战，包括添加、删除、验证和提交等操作。通过实例演示，你可以轻松掌握构建动态表单的方法。从初始化表单结构到动态添加和删除项目，每一步都有详细说明。此外，还会介绍如何处理表单提交和常见验证规则，帮助你构建功能完善的动态表单。

引入Form.List

什么是Form.List

Form.List 是 Ant Design 中的一个组件，允许用户动态地添加和删除表单项目。这种灵活性使 Form.List 成为了处理例如购物车、多任务列表等动态数据场景的理想选择。通过使用 Form.List，可以轻松地实现表单项目的动态增删，从而简化前端开发的工作。

Form.List的基本用法

Form.List 通常与 Form.Item 和 ArrayField 结合使用，以实现表单中的动态项目。以下是一种常见的使用方式：

使用 <Form.List> 定义可以动态增删的条目集合
使用 <ArrayField> 渲染每个条目
使用 <Form.Item> 为每个条目设定输入字段

如何安装和引入

要使用 Form.List，首先需要安装 Ant Design 和 React。可以通过 npm 或 yarn 安装 Ant Design。

npm install antd

或者

yarn add antd

接下来，在项目中引入和使用 Ant Design 的 Form.List 组件。

import { Form, FormList } from 'antd';
import { useState } from 'react';

const App = () => {
  const [form] = Form.useForm();
  const [items, setItems] = useState([]);

  const handleAddItem = () => {
    setItems([...items, items.length]);
  };

  return (
    <Form form={form}>
      <Form.List name="items">
        {(fields, { add, remove }) => {
          return (
            <div>
              {fields.map((field, index) => (
                <div key={field.key}>
                  <Form.Item
                    {...field}
                    name={[field.name, 'value']}
                    fieldKey={[field.fieldKey, 'value']}
                    rules={[{ required: true, message: 'Value is required!' }]}
                  >
                    <Input />
                  </Form.Item>
                  <div style={{ display: 'inline-block' }}>
                    <Form.Item>
                      <MinusCircleOutlined onClick={() => remove(field.name)} />
                    </Form.Item>
                  </div>
                </div>
              ))}
              <Form.Item>
                <Button type="dashed" onClick={handleAddItem} block icon={<PlusOutlined />}>
                  Add new item
                </Button>
              </Form.Item>
            </div>
          );
        }}
      </Form.List>
    </Form>
  );
};

export default App;

创建基本表单

表单结构的搭建

创建一个基本的 React 表单结构，利用 Ant Design 的 Form 组件。

import React from 'react';
import { Form, Input } from 'antd';

const App = () => {
  const onFinish = (values) => {
    console.log(values);
  };

  return (
    <Form onFinish={onFinish}>
      <Form.Item
        name="username"
        rules={[
          {
            required: true,
            message: 'Please input your username!',
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default App;

输入字段的初步设置

在表单中添加一个简单的输入字段。这里使用了 Ant Design 的 Input 组件和 Form.Item 来设置输入字段并添加验证规则。

<Form.Item
  name="username"
rules={[
  {
    required: true,
    message: 'Please input your username!',
  },
]}
>
  <Input />
</Form.Item>

使用Form.List添加动态项目

在现有的表单中引入 Form.List 组件，以允许动态添加新项目。

<Form.List name="items">
  {(fields, { add, remove }) => (
    <div>
      {fields.map((field) => (
        <Form.Item key={field.key} {...field} required>
          <Input />
        </Form.Item>
      ))}
      <Form.Item>
        <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
          Add new item
        </Button>
      </Form.Item>
    </div>
  )}
</Form.List>

动态添加项目

添加新项目的逻辑实现

在 Form.List 中添加新项目的逻辑，可以通过 add 方法实现。

<Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
  Add new item
</Button>

实现添加按钮

添加一个按钮，当点击时调用 add 方法来添加一个新的表单项目。

<Form.List name="items">
  {(fields, { add, remove }) => (
    <div>
      {fields.map((field) => (
        <Form.Item key={field.key} {...field} required>
          <Input />
        </Form.Item>
      ))}
      <Form.Item>
        <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
          Add new item
        </Button>
      </Form.Item>
    </div>
  )}
</Form.List>

动态渲染表单项

动态渲染表单项需要在 Form.List 的回调函数中处理。通过 fields.map 遍历所有字段，并渲染出每个表单项目。

<Form.List name="items">
  {(fields, { add, remove }) => (
    <div>
      {fields.map((field) => (
        <Form.Item key={field.key} {...field} required>
          <Input />
        </Form.Item>
      ))}
      <Form.Item>
        <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
          Add new item
        </Button>
      </Form.Item>
    </div>
  )}
</Form.List>

动态删除项目

创建删除项目的逻辑

在每个表单项中添加一个删除按钮，当点击时调用 remove 方法来删除对应的表单项目。

<div style={{ display: 'inline-block' }}>
  <Form.Item>
    <MinusCircleOutlined onClick={() => remove(field.name)} />
  </Form.Item>
</div>

设置删除按钮

在每个表单项的末尾添加一个删除按钮。

<Form.List name="items">
  {(fields, { add, remove }) => (
    <div>
      {fields.map((field) => (
        <div key={field.key}>
          <Form.Item
            {...field}
            name={[field.name, 'value']}
            fieldKey={[field.fieldKey, 'value']}
            rules={[{ required: true, message: 'Value is required!' }]}
          >
            <Input />
          </Form.Item>
          <div style={{ display: 'inline-block' }}>
            <Form.Item>
              <MinusCircleOutlined onClick={() => remove(field.name)} />
            </Form.Item>
          </div>
        </div>
      ))}
      <Form.Item>
        <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
          Add new item
        </Button>
      </Form.Item>
    </div>
  )}
</Form.List>

实现项目删除功能

通过调用 remove 方法，可以删除对应的表单项目。

<Form.List name="items">
  {(fields, { add, remove }) => (
    <div>
      {fields.map((field) => (
        <div key={field.key}>
          <Form.Item
            {...field}
            name={[field.name, 'value']}
            fieldKey={[field.fieldKey, 'value']}
            rules={[{ required: true, message: 'Value is required!' }]}
          >
            <Input />
          </Form.Item>
          <div style={{ display: 'inline-block' }}>
            <Form.Item>
              <MinusCircleOutlined onClick={() => remove(field.name)} />
            </Form.Item>
          </div>
        </div>
      ))}
      <Form.Item>
        <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
          Add new item
        </Button>
      </Form.Item>
    </div>
  )}
</Form.List>

表单验证与提交

常见验证规则简介

Ant Design 的 Form 组件提供了丰富的验证规则。常见的如 required、min、max、pattern 等。

<Form.Item
name="username"
rules={[
  {
    required: true,
    message: 'Please input your username!',
  },
]}
>
  <Input />
</Form.Item>

实现表单项的验证

在每个表单项中添加规则，用于验证输入的内容。

<Form.List name="items">
  {(fields, { add, remove }) => (
    <div>
      {fields.map((field) => (
        <div key={field.key}>
          <Form.Item
            {...field}
            name={[field.name, 'value']}
            fieldKey={[field.fieldKey, 'value']}
            rules={[
              {
                required: true,
                message: 'Value is required!',
              },
            ]}
          >
            <Input />
          </Form.Item>
          <div style={{ display: 'inline-block' }}>
            <Form.Item>
              <MinusCircleOutlined onClick={() => remove(field.name)} />
            </Form.Item>
          </div>
        </div>
      ))}
      <Form.Item>
        <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
          Add new item
        </Button>
      </Form.Item>
    </div>
  )}
</Form.List>

处理表单提交事件

在表单提交时，通过 onFinish 回调函数处理提交事件。

const onFinish = (values) => {
  console.log(values);
};

完整项目实践

综合实例：构建一个动态表单

构建一个动态表单，允许用户动态添加和删除表单项，同时具备验证和提交功能。

import React from 'react';
import { Form, Input, Button, FormList, MinusCircleOutlined, PlusOutlined } from 'antd';

const App = () => {
  const onFinish = (values) => {
    console.log(values);
  };

  return (
    <Form onFinish={onFinish}>
      <Form.List name="items">
        {(fields, { add, remove }) => (
          <div>
            {fields.map((field) => (
              <div key={field.key}>
                <Form.Item
                  {...field}
                  name={[field.name, 'value']}
                  fieldKey={[field.fieldKey, 'value']}
                  rules={[
                    {
                      required: true,
                      message: 'Value is required!',
                    },
                  ]}
                >
                  <Input />
                </Form.Item>
                <div style={{ display: 'inline-block' }}>
                  <Form.Item>
                    <MinusCircleOutlined onClick={() => remove(field.name)} />
                  </Form.Item>
                </div>
              </div>
            ))}
            <Form.Item>
              <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                Add new item
              </Button>
            </Form.Item>
          </div>
        )}
      </Form.List>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default App;

从零开始逐步构建

初始化表单结构：

使用 Ant Design 的 Form 组件创建基本的表单结构。
添加 onFinish 回调函数来处理表单提交。

const App = () => {
 const onFinish = (values) => {
   console.log(values);
 };

 return (
   <Form onFinish={onFinish}>
     {/* 表单项 */}
     <Form.Item>
       {/* 提交按钮 */}
       <Button type="primary" htmlType="submit">
         Submit
       </Button>
     </Form.Item>
   </Form>
 );
};

引入 Form.List：

引入 Form.List 组件，并在表单中使用它。
设置表单项的规则和验证。

import { Form, FormList } from 'antd';
import { useState } from 'react';

const App = () => {
 const [form] = Form.useForm();
 const [items, setItems] = useState([]);

 const handleAddItem = () => {
   setItems([...items, items.length]);
 };

 return (
   <Form form={form}>
     <Form.List name="items">
       {(fields, { add, remove }) => (
         <div>
           {fields.map((field, index) => (
             <div key={field.key}>
               <Form.Item
                 {...field}
                 name={[field.name, 'value']}
                 fieldKey={[field.fieldKey, 'value']}
                 rules={[
                   {
                     required: true,
                     message: 'Value is required!',
                   },
                 ]}
               >
                 <Input />
               </Form.Item>
               <div style={{ display: 'inline-block' }}>
                 <Form.Item>
                   <MinusCircleOutlined onClick={() => remove(field.name)} />
                 </Form.Item>
               </div>
             </div>
           ))}
           <Form.Item>
             <Button type="dashed" onClick={handleAddItem} block icon={<PlusOutlined />}>
               Add new item
             </Button>
           </Form.Item>
         </div>
       )}
     </Form.List>
   </Form>
 );
};

动态添加项目：

在 Form.List 中添加按钮，通过调用 add 方法添加新项目。
动态渲染每个表单项。

const App = () => {
 const [form] = Form.useForm();
 const [items, setItems] = useState([]);

 const handleAddItem = () => {
   setItems([...items, items.length]);
 };

 return (
   <Form form={form}>
     <Form.List name="items">
       {(fields, { add, remove }) => (
         <div>
           {fields.map((field) => (
             <div key={field.key}>
               <Form.Item
                 {...field}
                 name={[field.name, 'value']}
                 fieldKey={[field.fieldKey, 'value']}
                 rules={[
                   {
                     required: true,
                     message: 'Value is required!',
                   },
                 ]}
               >
                 <Input />
               </Form.Item>
               <div style={{ display: 'inline-block' }}>
                 <Form.Item>
                   <MinusCircleOutlined onClick={() => remove(field.name)} />
                 </Form.Item>
               </div>
             </div>
           ))}
           <Form.Item>
             <Button type="dashed" onClick={handleAddItem} block icon={<PlusOutlined />}>
               Add new item
             </Button>
           </Form.Item>
         </div>
       )}
     </Form.List>
   </Form>
 );
};

动态删除项目：

在每个表单项中添加删除按钮，通过调用 remove 方法来删除项目。

<Form.List name="items">
 {(fields, { add, remove }) => (
   <div>
     {fields.map((field) => (
       <div key={field.key}>
         <Form.Item
           {...field}
           name={[field.name, 'value']}
           fieldKey={[field.fieldKey, 'value']}
           rules={[
             {
               required: true,
               message: 'Value is required!',
             },
           ]}
         >
           <Input />
         </Form.Item>
         <div style={{ display: 'inline-block' }}>
           <Form.Item>
             <MinusCircleOutlined onClick={() => remove(field.name)} />
           </Form.Item>
         </div>
       </div>
     ))}
     <Form.Item>
       <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
         Add new item
       </Button>
     </Form.Item>
   </div>
 )}
</Form.List>

表单验证与提交：
- 为每个表单项设置验证规则。
- 实现表单提交逻辑，处理提交事件。
```
const onFinish = (values) => {
 console.log(values);
};
```

通过这些步骤，你将构建一个功能完善的动态表单。