import React from "react";
function demo() {
const FormConfig = {
labelCol: { span: 8 },
wrapperCol: { span: 16 },
};
const [form] = Form.useForm();
const data = "2,3"; //数据源 /**
* 适配器-可以根据自己的数据类型自行改变数据结构
* @param {*} data
* @returns
*/
const trans_val = (data) => {
let arr = data.split(",");
let new_arr = [];
new_arr = arr.map((item, index) => ({
val: item, //设置字段,在form.list下的form.item中指定的字段值
fieldKey: index,
isListField: true,
key: index,
name: index,
}));
return new_arr;
}; useEffect(() => {
form.setFieldsValue({
trigger_conds_group: trans_val(data),
});
}, []);
return (
<div>
<Form form={form} name="form_in_modal" hideRequiredMark={true}>
<Form.List
label="触发条件组合"
name="trigger_conds_group"
labelCol={FormConfig.labelCol.span}
rules={[
{ required: true, message: "请输入触发条件" },
({ getFieldValue }) => ({
validator(_, value) {
if (!value || value?.length === 0) {
message.error("请添加触发条件");
return Promise.reject(new Error("请添加触发条件"));
}
return Promise.resolve();
},
}),
]}
>
{(fields, { add, remove }) => (
<>
{fields.map(({ key, name, fieldKey, ...restField }) => (
<div
key={key}
style={{
display: "flex",
marginBottom: 8,
alignItems: "center",
}}
>
<Form.Item
{...restField}
label="触发条件"
name={[name, "val"]}
fieldKey={[fieldKey, "val"]}
rules={[{ required: true, message: "请输入触发条件" }]}
>
<Input
placeholder="请输入触发条件"
addonAfter={
<MinusCircleOutlined
style={{ marginLeft: "8px" }}
onClick={() => remove(name)}
/>
}
/>
</Form.Item>
</div>
))}
<Form.Item
wrapperCol={{
span: FormConfig.wrapperCol.span,
offset: FormConfig.labelCol.span,
}}
>
<Button
type="dashed"
onClick={() => {
// add_trigger_h(add);
add();
}}
block
icon={<PlusOutlined />}
>
添加触发条件
</Button>
</Form.Item>
</>
)}
</Form.List>
</Form>
</div>
);
}
export default demo;

注:这里面有个地方需要注意 form.list 下的form.item 表单中的input、Select元素不能用东西包裹,结构 form.item->Input,否则会导致指定初始值设置失败。

AntD为Form的List设置默认值 (antd form.list 设置默认值 )的更多相关文章

  1. antd做form表单的组件共用,利用mapPropsToFields填写默认值

    做单页应用,不管是用Vue还是React,或者其他,有一个重要的原则,就是:组件重用. 既然组件可以重用,那么当添加一个信息,和修改该信息的布局必然是一致的,这时候,最好的方法自然是利用同一个组件,在 ...

  2. C#编译器优化那点事 c# 如果一个对象的值为null,那么它调用扩展方法时为甚么不报错 webAPI 控制器(Controller)太多怎么办? .NET MVC项目设置包含Areas中的页面为默认启动页 (五)Net Core使用静态文件 学习ASP.NET Core Razor 编程系列八——并发处理

    C#编译器优化那点事   使用C#编写程序,给最终用户的程序,是需要使用release配置的,而release配置和debug配置,有一个关键区别,就是release的编译器优化默认是启用的.优化代码 ...

  3. Flask基础之返回值与form表单提交

    目录 1.Python 现阶段三大主流Web框架 Django Tornado Flask 对比 2.Flask的安装 3.Flask的第一个简单应用 4.Flask中的render_template ...

  4. Windows上最大传输单元MTU值的查看和设置

    最近使用ssh工具在VPN环境下连接一个生产环境的Linux主机的时候,发现经常出现输入命令后卡死的情况.最开始以为是Linux主机的问题,问了一些老同事之后发现原来是我自己电脑的最大传输单元MTU和 ...

  5. 修改UIView的默认Layer后,修改View的值会动态修改Layer的值

    修改UIView的默认Layer后,修改View的值会动态修改Layer的值 效果图: 如上图所示,当我们修改了一个UIView的子类中的Layer内置类型时(如上图中我们将CALayer直接替换成了 ...

  6. C#程序编写高质量代码改善的157个建议【4-9】[TryParse比Parse、使用int?来确保值类型也可以为null、readonly和const、0值设为枚举的默认值、避免给枚举类型的元素提供显式的值、习惯重载运算符]

    建议4.TryParse比Parse好 如果注意观察,除string之外的所有的基元类型.会发现它们都有两个将字符串转换为自身类型的方法:Parse和TryParse.以类型double为例. 两者最 ...

  7. bootstrap select 多选的用法,取值和赋值(取消默认选择第一个的对勾)

    h5自带的select标签可以实现按住ctrl键多选的功能,但是样式及其难看. bootstrap select是很好用的前端插件 ​ 首先引入bootstrap和bootstrap-select的c ...

  8. 封装transform函数(设置和获取transform的属性和属性值)

    (function (w) { /** * 设置或者获取元素的transform属性值 * @param node 要设置的元素 * @param param 变换属性: translate\scal ...

  9. 您配置文件中的设置 (空密码的 root) 与 MySQL 默认管理员账户对应...的解决办法

    您配置文件中的设置 (空密码的 root) 与 MySQL 默认管理员账户对应.……解决办法很简单:1.修改root@localhost权限的密码. 打开wamp的phpmyadmin,进入它的管理界 ...

  10. Eclipse Class Decompiler影响class默认打开方式,重新设置Eclipse默认源码打开方式

    安装Eclipse Class Decompiler插件后,Eclipse中的默认源码打开方式被修改为Eclipse Class Decompiler 这不是我喜欢的,因为我希望,源码从网络中获取,当 ...

随机推荐

  1. docker报错:报错br-xxxx 之Docker-Compose 自动创建的网桥与局域网络冲突

    故障描述: 当我使用docker-compose的方式部署内网的harbor时.它自动创建了一个bridge网桥,与内网的一个网段(172.18.0.1/16)发生冲突,docker 默认的网络模式是 ...

  2. Dell CS24-SC 服务器详情

    详情介绍: https://www.viziotech.com/servers/58-dell-cs24-sc-dual-xeon-quad-core-l5420-25ghz-16gb-4x146gb ...

  3. (转载)史上最详细的docker学习手册

    原文链接:https://my.oschina.net/u/1388595/blog/5078146 一.docker入门 1.docker的安装及入门示例 环境准备:docker需要安装在cento ...

  4. mysql数据库连接客户端过多

    flush hosts; 清理连接 查看当前连接数 show PROCESSLIST 与 show full PROCESSLIST (查看当前数据库所有连接,包含空闲连接与活跃连接) 查看最大连接数 ...

  5. ssh远程连接服务器

    远程连接服务器及压缩文件与解压 1 终端连接 ssh -p 端口号 用户名@地址 例如:ssh -p 80 name@host 每次远程连接,使用账号和密码登录,有可能使得端口被监听到,从而导致挖矿情 ...

  6. 【小记】copy 与 copy_backward

    copy 与 copy_backward copy 从前往后复制,result 参数指向目标容器的 begin 位置 copy*backward 从后往前复制,··· end 位置 Possible ...

  7. 【STM32】SYSCLK配置|学习笔记

    一.RCC原理 所有stm32的外设都是挂载在相应的时钟上的,如下 挂载在AHB上的外设 挂载在APB1上的 APB2上的 所以RCC很重要,特别像TIM这种对时钟特别敏感的外设就必须把SYSCLK确 ...

  8. db2入门必看命令清单--日常运维必需

    关注 推荐 嘉兴 视频 财经 科技 热点 国际 更多   搜索 34 消息 发布     5   2   收藏 分享 db2入门必看命令清单--日常运维必需 https://www.toutiao.c ...

  9. iOS SDK开发

    一款好用且设计充分的 SDK 必须要遵循以下 4 条基本原则,即: 1.SDK 安全,稳定2.统一的开发规范3.Library 小而精4.不依赖第三方 SDK安全,稳定:考虑到 SDK 是需要嵌入到 ...

  10. sublime 设置快捷键

    Tools-> Developer-> New Snippet 打开后保存文件要是以 .sublime-snippet 做结尾 <snippet> <content> ...