Form.List 动态表单项目实战：新手入门教程-原创手记-慕课网

概述

本文介绍了如何使用Form.List组件实现动态表单项目，详细讲解了动态添加和删除表单项的方法，并提供了完整的示例代码。文章还涵盖了表单项验证、提交流程以及常见问题的解决方法。通过本文，新手可以轻松入门Form.List 动态表单项目实战。

Form.List 动态表单项目实战：新手入门教程

Form.List 基础介绍

什么是Form.List

Form.List 是一个用于生成动态表单的组件，它允许用户根据需要动态添加或删除表单项。Form.List 组件通常用于需要处理多个重复字段的场景，例如用户信息表单中的地址信息、订单信息中的商品列表等。它的设计目的是为了简化表单的动态管理和数据的收集过程。

Form.List 的基本用法

Form.List 组件的主要功能是动态生成表单，根据用户需求添加或删除表单项。以下是一个简单的Form.List组件的基本用法示例：

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

const DynamicFieldSet = ({ fields, add, remove, name }) => {
  return (
    <Form.List name={name}>
      {(fields, { add, remove }) => {
        return fields.map((field, index) => (
          <div key={field.key}>
            <Form.Item
              {...field}
              label={`Field ${index + 1}`}
              name={[field.name, 'input']}
              rules={[{ required: true, message: 'Please input your input!' }]}
            >
              <Input />
            </Form.Item>
            <Form.Item>
              <Button type="danger" onClick={() => remove(field.name)}>Delete</Button>
            </Form.Item>
          </div>
        ));
        return (
          <Form.Item>
            <Button type="dashed" onClick={() => add()} block>
              添加一个表单
            </Button>
          </Form.Item>
        );
      }}
    </Form.List>
  );
};

const App = () => {
  const [form] = Form.useForm();
  const [fields, setFields] = useState([{ key: String(Date.now()) }]);

  const add = () => {
    setFields([...fields, { key: String(Date.now()) }]);
  };

  const remove = (key) => {
    setFields(fields.filter(item => item.key !== key));
  };

  return (
    <Form form={form}>
      <DynamicFieldSet fields={fields} add={add} remove={remove} name="dynamicField" />
    </Form>
  );
};

export default App;

Form.List 的应用场景

Form.List 组件适用于多种场景，如：

用户信息表单中的联系人信息，如联系人姓名、电话、地址等。
购物车中的商品信息，如商品名称、数量、价格等。
调查问卷中的多个选择题或者填空题。
项目管理中的任务列表，如任务名称、截止日期、负责人等。

动态表单项目需求分析

动态表单项目的基本需求

动态添加表单项：用户可以随时添加新的表单项。
动态删除表单项：用户可以删除已添加的表单项。
表单项的验证：确保每个表单项的数据符合要求。
表单项的提交：将所有表单项的数据提交至服务器。

动态表单项目的常见特性

动态生成表单项：表单项的数量和内容可以根据用户操作动态变化。
表单项的验证：每个表单项都有相应的验证规则，确保数据的准确性。
表单项的交互性：如添加、删除、编辑等操作。
表单数据的提交：将表单项的数据提交至服务器或本地存储。

动态表单项目搭建步骤

初始化项目环境

安装Node.js：确保你已经安装了Node.js环境。
创建项目：使用npm或yarn创建一个新的React项目，例如：
```
npx create-react-app my-form-list-project
cd my-form-list-project
```
安装必要的依赖：安装antd库和其他必要的依赖，例如：
```
npm install antd
```
配置项目：根据项目需求配置package.json和webpack配置文件等。

引入Form.List组件

在项目中引入Form.List组件，例如：

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

创建基础表单结构

创建一个基础的表单结构，包括必要的表单项和按钮。例如：

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

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

  return (
    <Form onFinish={onFinish}>
      <FormList name="fields">
        {(fields, { add, remove }) => (
          <>
            {fields.map((field, index) => (
              <Form.Item key={field.key} {...field} label={`Field ${index + 1}`}>
                <Input name={[field.name, 'input']} />
              </Form.Item>
            ))}
            <Form.Item>
              <Button type="dashed" onClick={() => add()} block>
                添加一个新的表单
              </Button>
            </Form.Item>
          </>
        )}
      </FormList>
    </Form>
  );
}

export default DynamicForm;

动态添加和删除表单项

使用Form.List动态添加表单项

在Form.List组件中使用add函数动态添加表单项。例如：

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

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

  return (
    <Form onFinish={onFinish}>
      <FormList name="fields">
        {(fields, { add, remove }) => (
          <>
            {fields.map((field, index) => (
              <Form.Item key={field.key} {...field} label={`Field ${index + 1}`}>
                <Input name={[field.name, 'input']} />
              </Form.Item>
            ))}
            <Form.Item>
              <Button type="dashed" onClick={() => add()} block>
                添加一个新的表单
              </Button>
            </Form.Item>
          </>
        )}
      </FormList>
    </Form>
  );
}

export default DynamicForm;

实现表单项的删除功能

使用remove函数删除表单项。例如：

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

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

  return (
    <Form onFinish={onFinish}>
      <FormList name="fields">
        {(fields, { add, remove }) => (
          <>
            {fields.map((field, index) => (
              <Form.Item key={field.key} {...field} label={`Field ${index + 1}`}>
                <Input name={[field.name, 'input']} />
              </Form.Item>
            ))}
            <Form.Item>
              <Button type="dashed" onClick={() => add()} block>
                添加一个新的表单
              </Button>
              <Button type="danger" onClick={() => remove()} block>
                移除最后一个表单
              </Button>
            </Form.Item>
          </>
        )}
      </FormList>
    </Form>
  );
}

export default DynamicForm;

优化表单项的操作体验

添加按钮位置：将添加按钮放置在表单项的上方或下方，使其更加明显。
删除按钮样式：为删除按钮添加不同的样式，使其更容易被识别。
表单项的提示信息：为表单项添加提示信息，告诉用户该表单项的作用或规则。
表单项的验证提示：在表单项验证失败时，显示相应的提示信息。

表单数据的提交和处理

获取表单数据的方法

使用onFinish回调函数获取表单数据，例如：

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

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

  return (
    <Form onFinish={onFinish}>
      <FormList name="fields">
        {(fields, { add, remove }) => (
          <>
            {fields.map((field, index) => (
              <Form.Item key={field.key} {...field} label={`Field ${index + 1}`}>
                <Input name={[field.name, 'input']} />
              </Form.Item>
            ))}
            <Form.Item>
              <Button type="dashed" onClick={() => add()} block>
                添加一个新的表单
              </Button>
              <Button type="danger" onClick={() => remove()} block>
                移除最后一个表单
              </Button>
            </Form.Item>
          </>
        )}
      </FormList>
    </Form>
  );
}

export default DynamicForm;

表单数据的验证和处理

在Form.Item中添加验证规则，确保表单项的数据符合要求。例如：

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

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

  return (
    <Form onFinish={onFinish}>
      <FormList name="fields">
        {(fields, { add, remove }) => (
          <>
            {fields.map((field, index) => (
              <Form.Item
                key={field.key}
                {...field}
                label={`Field ${index + 1}`}
                name={[field.name, 'input']}
                rules={[
                  { required: true, message: 'Please input your input!' },
                ]}
              >
                <Input />
              </Form.Item>
            ))}
            <Form.Item>
              <Button type="dashed" onClick={() => add()} block>
                添加一个新的表单
              </Button>
              <Button type="danger" onClick={() => remove()} block>
                移除最后一个表单
              </Button>
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                提交表单
              </Button>
            </Form.Item>
          </>
        )}
      </FormList>
    </Form>
  );
}

export default DynamicForm;

表单数据的提交流程

表单数据获取：当用户提交表单时，通过onFinish回调函数获取表单项的数据。
数据验证：使用Form.Item中的验证规则验证表单项的数据。
数据处理：将验证通过的数据进行处理，例如发送到服务器。

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

function DynamicForm() {
  const onFinish = (values) => {
    console.log('Received values of form: ', values);
    // 处理表单数据，例如提交到服务器
  };

  return (
    <Form onFinish={onFinish}>
      <FormList name="fields">
        {(fields, { add, remove }) => (
          <>
            {fields.map((field, index) => (
              <Form.Item
                key={field.key}
                {...field}
                label={`Field ${index + 1}`}
                name={[field.name, 'input']}
                rules={[
                  { required: true, message: 'Please input your input!' },
                ]}
              >
                <Input />
              </Form.Item>
            ))}
            <Form.Item>
              <Button type="dashed" onClick={() => add()} block>
                添加一个新的表单
              </Button>
              <Button type="danger" onClick={() => remove()} block>
                移除最后一个表单
              </Button>
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                提交表单
              </Button>
            </Form.Item>
          </>
        )}
      </FormList>
    </Form>
  );
}

export default DynamicForm;

动态表单项目的常见问题及解决方法

常见问题汇总

表单项无法动态添加或删除：可能是因为Form.List组件的add和remove函数没有正确使用。
表单项验证失败：可能是因为表单项的验证规则设置不正确。
表单项数据提交失败：可能是因为表单项的数据验证失败或提交逻辑有误。

问题解决思路和示例代码

问题一：表单项无法动态添加或删除

确保在Form.List组件中正确使用add和remove函数。例如：

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

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

  return (
    <Form onFinish={onFinish}>
      <FormList name="fields">
        {(fields, { add, remove }) => (
          <>
            {fields.map((field, index) => (
              <Form.Item
                key={field.key}
                {...field}
                label={`Field ${index + 1}`}
                name={[field.name, 'input']}
                rules={[
                  { required: true, message: 'Please input your input!' },
                ]}
              >
                <Input />
              </Form.Item>
            ))}
            <Form.Item>
              <Button type="dashed" onClick={() => add()} block>
                添加一个新的表单
              </Button>
              <Button type="danger" onClick={() => remove()} block>
                移除最后一个表单
              </Button>
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                提交表单
              </Button>
            </Form.Item>
          </>
        )}
      </FormList>
    </Form>
  );
}

export default DynamicForm;

问题二：表单项验证失败

确保在Form.Item中正确设置验证规则。例如：

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

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

  return (
    <Form onFinish={onFinish}>
      <FormList name="fields">
        {(fields, { add, remove }) => (
          <>
            {fields.map((field, index) => (
              <Form.Item
                key={field.key}
                {...field}
                label={`Field ${index + 1}`}
                name={[field.name, 'input']}
                rules={[
                  { required: true, message: 'Please input your input!' },
                ]}
              >
                <Input />
              </Form.Item>
            ))}
            <Form.Item>
              <Button type="dashed" onClick={() => add()} block>
                添加一个新的表单
              </Button>
              <Button type="danger" onClick={() => remove()} block>
                移除最后一个表单
              </Button>
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                提交表单
              </Button>
            </Form.Item>
          </>
        )}
      </FormList>
    </Form>
  );
}

export default DynamicForm;

问题三：表单项数据提交失败

确保表单项的数据验证通过后再进行提交操作。例如：


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

function DynamicForm() {
  const onFinish = (values) => {
    console.log('Received values of form: ', values);
    // 处理表单数据，例如提交到服务器
  };

  return (
    <Form onFinish={onFinish}>
      <FormList name="fields">
        {(fields, { add, remove }) => (
          <>
            {fields.map((field, index) => (
              <Form.Item
                key={field.key}
                {...field}
                label={`Field ${index + 1}`}
                name={[field.name, 'input']}
                rules={[
                  { required: true, message: 'Please input your input!' },
                ]}
              >
                <Input />
              </Form.Item>
            ))}
            <Form.Item>
              <Button type="dashed" onClick={() => add()} block>
                添加一个新的表单
              </Button>
              <Button type="danger" onClick={() => remove()} block>
                移除最后一个表单
              </Button>
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                提交表单
              </Button>
            </Form.Item>
          </>
        )}
      </FormList>
    </Form>
  );
}

export default DynamicForm;
``

通过以上步骤，你将能够成功实现一个动态表单项目，并处理各种常见问题。希望这篇教程对你有所帮助。