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. Adobe Acrobat PDF Reader DC软件下载

    安装包下载 https://get.adobe.com/en/reader/enterprise/ ftp下载,按日期排序 ftp://ftp.adobe.com/pub/adobe/reader/w ...

  2. java中带回调函数的字符串替换,类似js中的replace(rgExp,function)

    https://blog.csdn.net/weixin_33834075/article/details/91599852 import java.util.regex.Matcher; impor ...

  3. 下载base64图片

    下载 this.downloadFile('二维码',that.img64) downloadFile(fileName, content) { let aLink = document.create ...

  4. webp图像格式

    WebP图像格式 这是支持在互联网上无损和有损图像质量压缩的新格式. 谷歌公司开发这种格式专为在网上迅速和方便地做好工作. 其主要优点是,相对于其他图像格式,文件小,但图像质量相似. 打开: WIND ...

  5. 吴恩达老师机器学习课程chapter11——大规模机器学习

    吴恩达老师机器学习课程chapter11--大规模机器学习 本文是非计算机专业新手的自学笔记,高手勿喷. 本文仅作速查备忘之用,对应吴恩达(AndrewNg)老师的机器学期课程第十七章. 这是这次整理 ...

  6. WCF 安全

    服务器端与客户端都安装证书,双方通过证书加密通讯. 配置wsHttpBinding,使用基于消息的用户名验证.首先配置为Windows账户库验证. 服务器端配置: <?xml version=& ...

  7. 使用VS Code打造完美的嵌入式IDE

    参考这个博主https://blog.csdn.net/qq_34245464/article/details/100769643的博文, 使用VS Code再重新打造一次完美的嵌入式IDE平台. 前 ...

  8. CF652F 题解

    题意 传送门 在一个长度为 \(m\) 的圆环上有 \(n\) 只初始位置互不相同的蚂蚁,每只蚂蚁的速度都为 \(1\),初始方向为顺时针或逆时针:两只运动方向不同的蚂蚁相遇时会调转方向,问 \(t\ ...

  9. 实践:带您用多种姿势将存储在腾讯云COS 上的视频播放

    导语 随着5G时代的到来,短视频/直播行业开始流行,音视频逐渐成为信息传播中流量占比最大的部分.腾讯云对象存储(COS)作为可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务,早已不 ...

  10. 修改 input框、textarea框的placeholder样式

    /* 设置input框提示内容的样式 */ input::-webkit-input-placeholder { font-size: 14px; color: #ccc; font-weight: ...