首页手记 Form.List 动态表单教程：快速入门指南

Form.List 动态表单教程：快速入门指南

标签：

设计运维自动化测试

概述

本文将详细介绍如何使用Form.List 动态表单教程来创建和管理动态表单，涵盖动态增删表单项、表单验证以及提交表单的基本操作。通过具体示例和代码演示，帮助开发者快速掌握Form.List的使用方法。

Form.List 动态表单教程：快速入门指南

1. Form.List 简介

1.1 什么是 Form.List

Form.List 是一个用于处理动态表单的库，它允许开发者通过简单的 API 实现表单的动态增删改查等操作。在现代 Web 开发中，动态表单的应用非常广泛，例如在订单管理、问卷调查、购物车等场景中。

Form.List 提供了一种灵活且高效的方式来管理表单项，使得开发者可以更加专注于业务逻辑的实现，而不需要花费大量时间在表单的管理上。

1.2 Form.List 的应用场景

Form.List 可应用于多种场景，以下是一些常见的使用场景：

订单管理：在电商网站中，购物车中的商品列表可以使用 Form.List 来动态管理。
问卷调查：在问卷调查应用中，不同类型的题目可以动态添加和删除。
评论系统：在社区应用中，评论列表可以使用 Form.List 来实现动态增删评论。
表单提交：在复杂的表单提交场景中，表单项可以动态生成和修改。

2. 动态表单基础

2.1 动态表单的基本概念

动态表单是指其表单内容可以根据业务需求动态增删改查的表单。与静态表单不同，动态表单的内容是可变的，表单项的数量和类型可以根据用户操作实时调整。

2.2 动态表单的主要特性

动态表单的主要特性包括：

动态增删表单项：可以实时添加或删除表单项。
表单项的增删改查：可以对表单项进行修改、查询等操作。
表单验证：支持表单验证，确保数据的正确性和完整性。

3. 初始化 Form.List

3.1 安装和引入 Form.List

首先，你需要在你的项目中安装 Form.List。可以通过 npm 或 yarn 来安装：

npm install @formily/react
# 或者
yarn add @formily/react

安装完成后，你需要在项目中引入 Form.List：

import { Form, Field } from '@formily/react';
import { FormList } from '@formily/react';

const FormListExample = () => {
  return (
    <Form>
      <FormList name="items">
        {/* 表单项内容 */}
      </FormList>
    </Form>
  );
};

3.2 基本初始化步骤

在初始化 Form.List 时，你需要定义一个表单和一个 FormList 组件。下面是一个简单的示例：

import React from 'react';
import { Form, Field } from '@formily/react';
import { FormList } from '@formily/react';

const FormListExample = () => {
  return (
    <Form>
      <FormList name="items">
        <Field name="title" type="text" label="标题" />
        <Field name="content" type="text" label="内容" />
      </FormList>
    </Form>
  );
};

export default FormListExample;

在此示例中，FormList 组件绑定了一个名为 items 的表单字段，该字段包含两个子表单项：title 和 content。

4. 常用操作详解

4.1 添加和删除表单项

Form.List 支持动态添加和删除表单项。以下是一些常用的 API：

4.1.1 添加表单项

你可以使用 addItem 方法来添加一个新的表单项：

import React, { useState } from 'react';
import { Form, Field } from '@formily/react';
import { FormList } from '@formily/react';

const FormListExample = () => {
  const [itemCount, setItemCount] = useState(0);

  const addNewItem = () => {
    setItemCount(itemCount + 1);
  };

  return (
    <Form>
      <FormList name="items">
        {Array.from({ length: itemCount }, (_, index) => (
          <Field name={['items', index, 'title']} type="text" label={`标题 ${index}`} />
        ))}
      </FormList>
      <button onClick={addNewItem}>添加表单项</button>
    </Form>
  );
};

export default FormListExample;

4.1.2 删除表单项

你可以使用 removeItem 方法来删除一个表单项：

import React, { useState } from 'react';
import { Form, Field } from '@formily/react';
import { FormList } from '@formily/react';

const FormListExample = () => {
  const [itemCount, setItemCount] = useState(0);
  const [selectedIndex, setSelectedIndex] = useState(null);

  const addNewItem = () => {
    setItemCount(itemCount + 1);
  };

  const removeItem = () => {
    if (selectedIndex !== null) {
      setItemCount(itemCount - 1);
      setSelectedIndex(null);
    }
  };

  return (
    <Form>
      <FormList name="items">
        {Array.from({ length: itemCount }, (_, index) => (
          <Field name={['items', index, 'title']} type="text" label={`标题 ${index}`} />
        ))}
      </FormList>
      <button onClick={addNewItem}>添加表单项</button>
      <button onClick={removeItem}>删除表单项</button>
    </Form>
  );
};

export default FormListExample;

4.2 表单项的增删改查

Form.List 提供了丰富的 API 来处理表单项的增删改查操作。

4.2.1 修改表单项

你可以直接使用 Field 组件来修改表单项：

import React, { useState } from 'react';
import { Form, Field } from '@formily/react';
import { FormList } from '@formily/react';

const FormListExample = () => {
  const [itemCount, setItemCount] = useState(1);
  const [isRequired, setIsRequired] = useState(true);

  const updateItem = (index, value) => {
    console.log(`更新表单项 ${index}: `, value);
    // 这里可以添加更新表单项逻辑
  };

  return (
    <Form>
      <FormList name="items">
        {Array.from({ length: itemCount }, (_, index) => (
          <Field name={['items', index, 'title']} type="text" label={`标题 ${index}`} required={isRequired} onChange={(value) => updateItem(index, value)} />
        ))}
      </FormList>
      <button onClick={() => setItemCount(itemCount + 1)}>添加表单项</button>
      <button onClick={() => setItemCount(itemCount - 1)}>删除表单项</button>
      <button onClick={() => setIsRequired(!isRequired)}>切换必填</button>
    </Form>
  );
};

export default FormListExample;

4.2.2 查询表单项

你可以使用 Field 组件的 value 属性来查询表单项的值：

import React, { useState } from 'react';
import { Form, Field } from '@formily/react';
import { FormList } from '@formily/react';

const FormListExample = () => {
  const [itemCount, setItemCount] = useState(1);
  const [isRequired, setIsRequired] = useState(true);

  const getItemValue = (index) => {
    console.log(`获取表单项 ${index} 的值`, form.values['items'][index]);
    // 这里可以添加查询表单项值逻辑
  };

  return (
    <Form>
      <FormList name="items">
        {Array.from({ length: itemCount }, (_, index) => (
          <Field name={['items', index, 'title']} type="text" label={`标题 ${index}`} required={isRequired} />
        ))}
      </FormList>
      <button onClick={() => setItemCount(itemCount + 1)}>添加表单项</button>
      <button onClick={() => setItemCount(itemCount - 1)}>删除表单项</button>
      <button onClick={() => setIsRequired(!isRequired)}>切换必填</button>
      <button onClick={() => getItemValue(0)}>查询表单项</button>
    </Form>
  );
};

export default FormListExample;

5. 表单验证入门

5.1 表单验证的基础规则

Form.List 提供了丰富的表单验证规则，以确保表单数据的正确性和完整性。以下是一些常用的验证规则：

required：验证字段是否必填。
maxLength：验证字符串的最大长度。
minLength：验证字符串的最小长度。
pattern：使用正则表达式验证字段内容。
type：验证字段类型，例如 email, url, number 等。

示例代码

import React from 'react';
import { Form, Field } from '@formily/react';
import { FormList } from '@formily/react';

const FormListExample = () => {
  return (
    <Form>
      <FormList name="items">
        <Field name="email" type="text" label="邮箱" required pattern="^\\w+([\\.\\-+]\\w+)*@\\w+([\\.-]\\w+)*\\.\\w+$" />
        <Field name="phone" type="text" label="电话" maxLength={11} minLength={11} />
      </FormList>
    </Form>
  );
};

export default FormListExample;

5.2 动态验证表单项

Form.List 支持动态验证表单项，这意味着你可以根据业务需求动态地添加或修改验证规则。

示例代码

import React from 'react';
import { Form, Field } from '@formily/react';
import { FormList } from '@formily/react';

const FormListExample = () => {
  const [isRequired, setIsRequired] = useState(true);

  return (
    <Form>
      <FormList name="items">
        <Field name="email" type="text" label="邮箱" required={isRequired} />
      </FormList>
      <button onClick={() => setIsRequired(!isRequired)}>切换必填</button>
    </Form>
  );
};

export default FormListExample;

6. 实际案例演练

6.1 创建一个简单的动态表单

接下来，我们将创建一个简单的动态表单，该表单可以动态添加和删除表单项，并支持表单验证。

示例代码

import React, { useState } from 'react';
import { Form, Field } from '@formily/react';
import { FormList } from '@formily/react';

const FormListExample = () => {
  const [itemCount, setItemCount] = useState(1);
  const [isRequired, setIsRequired] = useState(true);

  const addNewItem = () => {
    setItemCount(itemCount + 1);
  };

  const removeItem = () => {
    if (itemCount > 1) {
      setItemCount(itemCount - 1);
    }
  };

  return (
    <Form>
      <FormList name="items">
        {Array.from({ length: itemCount }, (_, index) => (
          <Field name={['items', index, 'title']} type="text" label={`标题 ${index}`} required={isRequired} />
        ))}
      </FormList>
      <button onClick={addNewItem}>添加表单项</button>
      <button onClick={removeItem}>删除表单项</button>
      <button onClick={() => setIsRequired(!isRequired)}>切换必填</button>
    </Form>
  );
};

export default FormListExample;

6.2 动态表单的提交与响应

在实际应用中，动态表单通常需要提交表单数据并处理响应。以下是一个简单的示例，展示了如何提交表单并处理响应。

示例代码

import React, { useState } from 'react';
import { Form, Field } from '@formily/react';
import { FormList } from '@formily/react';

const FormListExample = () => {
  const [itemCount, setItemCount] = useState(1);
  const [isRequired, setIsRequired] = useState(true);

  const handleSubmit = (values) => {
    console.log('提交的表单数据：', values);
    fetch('/api/submit-form', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(values),
    })
      .then((response) => response.json())
      .then((data) => {
        console.log('响应数据：', data);
        // 这里可以添加响应处理逻辑
      })
      .catch((error) => {
        console.error('提交失败：', error);
      });
  };

  const addNewItem = () => {
    setItemCount(itemCount + 1);
  };

  const removeItem = () => {
    if (itemCount > 1) {
      setItemCount(itemCount - 1);
    }
  };

  return (
    <Form onSubmit={handleSubmit}>
      <FormList name="items">
        {Array.from({ length: itemCount }, (_, index) => (
          <Field name={['items', index, 'title']} type="text" label={`标题 ${index}`} required={isRequired} />
        ))}
      </FormList>
      <button onClick={addNewItem}>添加表单项</button>
      <button onClick={removeItem}>删除表单项</button>
      <button onClick={() => setIsRequired(!isRequired)}>切换必填</button>
      <button type="submit">提交表单</button>
    </Form>
  );
};

export default FormListExample;

通过以上示例，你可以看到 Form.List 如何帮助你创建和管理动态表单。希望这篇教程能够帮助你更好地理解和使用 Form.List。如果你需要进一步学习，可以参考慕课网上的相关教程。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

波斯汪

手记
篇

粉丝

67

获赞与收藏

430

关注作者，订阅最新文章

阅读免费教程

设计模式入门教程

10个小节 22000 417

Dreamweaver 教程

25个小节 5086 102

后端通用面试教程

41个小节 30964 346

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

Form.List 动态表单教程：快速入门指南

1.1 什么是 Form.List

1.2 Form.List 的应用场景

2.1 动态表单的基本概念

2.2 动态表单的主要特性

3.1 安装和引入 Form.List

3.2 基本初始化步骤

4.1 添加和删除表单项

4.1.1 添加表单项

4.1.2 删除表单项

4.2 表单项的增删改查

4.2.1 修改表单项

4.2.2 查询表单项

5.1 表单验证的基础规则

示例代码

5.2 动态验证表单项

示例代码

6.1 创建一个简单的动态表单

示例代码

6.2 动态表单的提交与响应

示例代码

阅读免费教程