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. fsck.fat 检查修复(MS-DOS)fat类型文件系统

    使用方式 fsck.fat [option] DEVICE 例如 fsck.fat -aw /dev/usba0 fsck.fat 检查fat文件系统的一致性,并选择性的尝试修复他们. 如下文件系统问 ...

  2. excel、word、PPT中插入PDF文件不显示图标问题

    插入PDF对象,不显示正确的PDF图标 临时解决办法:手动修改对象图标 具体位置,可在C:\Windows\Installer目录下搜索PDFFile_8.ico 尝试如下操作: 手动复制生成C:\W ...

  3. win10系统下mysql安装

    1.官网下载压缩包 2.添加环境变量到PATH 3.在bin的同级目录下,新增my.ini,内容如下(严重注意,是斜杠,千万别写成反斜杠!!!): [mysqld] basedir = D://sof ...

  4. iverilog_makefile

    makefile run: iverilog -g2005-sv -I ../inc -s tb -f filelist -o kout sim: vvp kout flist: find ../rt ...

  5. PPT模板网址

    PPT免费下载网址: https://www.1ppt.com/ PPT模板下载:www.1ppt.com/moban/                行业PPT模板:www.1ppt.com/han ...

  6. 2019-2020-1 20199318《Linux内核原理与分析》第九周作业

    第8章 进程的切换和系统的一般执行过程 一.学习总结 Linux系统的一般执行过程: 最一般的情况:正在运行的用户态进程X切换到运行用户态进程Y的过程. (1)正在运行的用户态进程X; (2)发生中断 ...

  7. C++实现有序表--链表的合并操作代码

    #include<iostream>#include<cstdlib>using namespace std;#define MAXSIZE 100#define OK 1#d ...

  8. ApacheBench(压力测试)

    1.post请求 (post.txt body信息) ab -c2000 -n50 -p post.txt -T "application/json"  url 2.get 请求 ...

  9. idea设置类,方法模板 阿里检测

    一.设置IDEA 中的类注释模板File -> Settings -> Editor -> File and Code Templates -> Files /** * @Cl ...

  10. 基于Java语言的编码问题了解

    基于Java语言的编码问题了解 以下仅为本人工作.学习过程中所接触到的内容,不足之处欢迎指出. 近两天使用maven的tomcat插件,以及使用非插件版的tomcat部署项目时遇到了乱码问题,在解决乱 ...