React Antd Form.List 组件嵌套多级动态增减表单 + 表单联动复制实现

已于 2024-03-03 20:27:45 修改
阅读量4.6k 收藏 5
点赞数 1
文章标签： react.js 前端 前端框架
于 2023-07-02 14:42:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Constantiny/article/details/131493720
版权

Antd Form.List 组件嵌套多级动态增减表单 + 表单联动复制实现

一、业务需求

有一个页面的组件，其中一部分需要用到动态的增减 + 复制表单，然后就想起
了使用 Antd 的 Form.List 去完成这个功能。

这个功能的要求是：

  • 首先是一个动态的表单，可以通过按钮进行增减操作，但是再嵌套了一层，就形成了 Form.List 再套 Form.List 了。
  • 第一个动态表单可以通过外层的按钮去添加同级的表单，嵌套的一层就是在同级的表单里面再套了一 Form.List，独属于这个模块下面的动态表单，然后这个下面的动态表单选择的内容又需要根据表单的选中的值进行联动
  • 第一层表单还可以进行复制，点击复制会生成在生成第一层同样的表单。

综合以上需求，大致的页面样子
在这里插入图片描述

二、实现思路

话不多说，直接上代码：
案例代码

三、

最低0.47元/天 解锁文章
zoe_ya
关注
「已解决」React Antd Form.List 表单校验无飘红提示的问题
Constantiny的博客
07-27 2172
比如我有这样一段代码来实现对 list 具体内容的校验，但是写完后发现没有提示，打 console.log 发现也能进入到 throw new Error 里面去，但是就是没有飘红提示。我想对 Form.List 构建的表单进行校验，比如下拉框中的内容应当至少有一个 XX，表单的长度不能少于多少等等对 List 内容进行校验，并给出飘红提示。看官网，对 Form.list 整体进行校验需要加上 ErrorList 才能正常显示 飘红提示。
antd react form.list动态增减表单项Switch受控
最新发布
u010234868的专栏
08-02 454
这个代码示例展示了如何使用Ant Design的Form和Form.List组件来创建一个可动态增减表单项的表单，并且每个表单项旁边都有一个Switch组件，这些Switch组件是受控的，即它们的状态会被保存在组件的状态中。当用户提交表单时，表单的数据以及Switch的状态都会被打印出来。
antd Form.list嵌套Form.list
zxz_learn的博客
08-24 6348
import { Form, Input, Button, Space, Select } from 'antd'; import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'; const { Option } = Select; const areas = [ { label: 'Beijing', value: 'Beijing' }, { label: 'Shanghai', value: 'Shanghai
react antd Form.List Form.Iterm Checkbox.Group的案例
马金波
07-20 4079
邮件订阅交易报表流水 import React from "react"; import { inject, observer } from "mobx-react"; import { withRouter } from "react-router-dom"; import {Input, Button, Checkbox, Form, Skeleton} from "antd"; import addIcon from '@ASSETS/images/icon/add.png'; import subI
antd Form.List嵌套Form.List
weixin_46226625的博客
05-10 1339
【代码】antd Form.List嵌套Form.List。
React + antd实现嵌套可增减表单
x_chu的博客
06-16 2145
使用React + antd实现符合嵌套增减表单
在react项目中使用antd的form组件,动态设置input框的值
01-18
问题： ... 原因： ...不使用initialValue设置动态更新的值，而是使用 this.props.form.setFieldValue({name:data}); 用于动态更新值，就可以解决了。 if (result.code===0) { if (result.data) { this.
记录antd表单组件的Form.List的一个使用场景 如何自定义一个新的Form表单组件
nihaoljs的博客
07-12 2965
antd 表单
antd form表单数据回显操作
01-22
index页面有一个表格，有一个新增按钮，点击新增按钮或表格编辑弹出表单模块，如果是编辑，会回显对应的表格中的数据 //index页面 import React from 'react' import { Table, Button, message, Input, Select, ...
JavaScript动态增减表单项
01-13
通过JavaScript 动态的添加表单 删除表单
9.Ant Design Pro Form.List多层嵌套
11-24 3058
Ant Design Pro Form.List多层嵌套
antd 嵌套form.List
weixin_53911951的博客
07-05 175
【代码】antd 嵌套form.List。
Form.List实现多层嵌套动态添加表格antd+hooks+ts
MYG_G
11-26 3239
功能如下 1.默认无数据，点击绿色新增按钮，会动态添加条件组 2.新增的动态条件组中都有新增子组件的按钮，可以在组中，在动态添加子组件 数据结构如下： "inGroups": [ { "conGroup": [ { "xxx": null, "yyy": 1, "zzz": 1, },
[React] Antd Form.List 的基本使用
iChangebaobao的博客
05-07 3906
[React] Antd Form.List 的基本使用 Form.List 为字段提供数组化管理。 官网：https://ant.design/components/form-cn/#Form.List <Form.List name='infoList'> {(fields, {add, remove}) => ( <> <FormItem> {gettext('用户填写信息')} <Button
Antd表单Form.List动态操作列，动态修改值
weixin_42748141的博客
04-12 2915
背景：React+TypeScript+Umi+Antd。 适用于需要调用方法改form.list的值
react antd Form.List动态设置默认值
Peter_Anna的博客
12-22 524
react antd Form.List动态设置默认值（select级联）
react实现动态增减表单项
qq_41591215的博客
05-22 383
前端向后端传送的是一个对象数组，也就是这种格式：[{label: ‘xxx’, value: ‘xxx’}]后端用Go实现，因为每次新增的信息可能不一样，所以每次新增的时候，会先删除旧的数据，再插入。在做项目的时候，甲方给的信息有限，网页的备案信息写成固定的，如下图所示。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zoe_ya

如果你成功申请，可以打赏杯奶茶

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值