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. MxDraw云图平台 2021.10.28更新,H5在线CAD,网页CAD,网页浏览编辑DWG

    1. 增加转换CAD文件的outpath参数设置,设置输出文件路径2. 修改转换程序,在 windows server 2010上,没有buf,距到中文路径的文件 ,转换会失败问题3. 修改宋体字体显 ...

  2. zabbix利用python3脚本进行钉钉报警

    1.新建脚本dingding.py内容如下   注意需要用unix格式  不然会报错/usr/bin/python3^M #!/usr/bin/python3import requestsimport ...

  3. x264码率控制

    1. x264 1.1 preset 的参数主要调节编码速度和质量的平衡,有ultrafast.superfast.veryfast.faster.fast.medium.slow.slower.ve ...

  4. Rust字符串处理

    Trim移除字符串开始末尾的字符串 fn main() { let s = " Hello Rust! "; // trim移除字符串开始末尾的空格 // "Hello ...

  5. 使用Github或Gitlab的Webhooks实现代码自动更新部署(Ubuntu20.04)

    1.安装ssh服务root@Ubuntu:~# apt-get install openssh-server 2.部署phproot@Ubuntu:~# add-apt-repository ppa: ...

  6. 记一个在线工具网站,程序员必备,json格式化、压缩、转义,加解密 编码解码

    简用-在线工具箱-简单易用-工具大全 提供 json格式化,json代码压缩,json校验解析,json数组解析,json转xml,xml转json,json解析,json在线解析,json在线解析及 ...

  7. 1.java 开始

    WelloWorld 随便新建一个文件夹,存放代码 新建一个java文件 编写代码 编译javac java文件,生成一个class文件 运行class文件,java class 可能遇到的情况 每个 ...

  8. 阿里云部署OSS对接TP项目

    1.配置文件写入参数 domain为阿里云oss存储实例要绑定的域名 2.获取accesskeyId和secret 注册用户 出现下图,选择"开始使用子用户Access Key" ...

  9. 第6课第4节_Binder系统_驱动情景分析_服务注册过程_分析

    Service_manager.c 8074 2017/6/30 首先从应用程序分析(Android) binder_loop(bs, svcmgr_handler) { readbuf[0] = B ...

  10. wmi和wmic

    https://baike.baidu.com/item/Windows%20Management%20Instrumentation/572501?fromtitle=WMI&fromid= ...