AntD为Form的List设置默认值 (antd form.list 设置默认值 )
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 设置默认值 )的更多相关文章
- antd做form表单的组件共用,利用mapPropsToFields填写默认值
做单页应用,不管是用Vue还是React,或者其他,有一个重要的原则,就是:组件重用. 既然组件可以重用,那么当添加一个信息,和修改该信息的布局必然是一致的,这时候,最好的方法自然是利用同一个组件,在 ...
- C#编译器优化那点事 c# 如果一个对象的值为null,那么它调用扩展方法时为甚么不报错 webAPI 控制器(Controller)太多怎么办? .NET MVC项目设置包含Areas中的页面为默认启动页 (五)Net Core使用静态文件 学习ASP.NET Core Razor 编程系列八——并发处理
C#编译器优化那点事 使用C#编写程序,给最终用户的程序,是需要使用release配置的,而release配置和debug配置,有一个关键区别,就是release的编译器优化默认是启用的.优化代码 ...
- Flask基础之返回值与form表单提交
目录 1.Python 现阶段三大主流Web框架 Django Tornado Flask 对比 2.Flask的安装 3.Flask的第一个简单应用 4.Flask中的render_template ...
- Windows上最大传输单元MTU值的查看和设置
最近使用ssh工具在VPN环境下连接一个生产环境的Linux主机的时候,发现经常出现输入命令后卡死的情况.最开始以为是Linux主机的问题,问了一些老同事之后发现原来是我自己电脑的最大传输单元MTU和 ...
- 修改UIView的默认Layer后,修改View的值会动态修改Layer的值
修改UIView的默认Layer后,修改View的值会动态修改Layer的值 效果图: 如上图所示,当我们修改了一个UIView的子类中的Layer内置类型时(如上图中我们将CALayer直接替换成了 ...
- C#程序编写高质量代码改善的157个建议【4-9】[TryParse比Parse、使用int?来确保值类型也可以为null、readonly和const、0值设为枚举的默认值、避免给枚举类型的元素提供显式的值、习惯重载运算符]
建议4.TryParse比Parse好 如果注意观察,除string之外的所有的基元类型.会发现它们都有两个将字符串转换为自身类型的方法:Parse和TryParse.以类型double为例. 两者最 ...
- bootstrap select 多选的用法,取值和赋值(取消默认选择第一个的对勾)
h5自带的select标签可以实现按住ctrl键多选的功能,但是样式及其难看. bootstrap select是很好用的前端插件 首先引入bootstrap和bootstrap-select的c ...
- 封装transform函数(设置和获取transform的属性和属性值)
(function (w) { /** * 设置或者获取元素的transform属性值 * @param node 要设置的元素 * @param param 变换属性: translate\scal ...
- 您配置文件中的设置 (空密码的 root) 与 MySQL 默认管理员账户对应...的解决办法
您配置文件中的设置 (空密码的 root) 与 MySQL 默认管理员账户对应.……解决办法很简单:1.修改root@localhost权限的密码. 打开wamp的phpmyadmin,进入它的管理界 ...
- Eclipse Class Decompiler影响class默认打开方式,重新设置Eclipse默认源码打开方式
安装Eclipse Class Decompiler插件后,Eclipse中的默认源码打开方式被修改为Eclipse Class Decompiler 这不是我喜欢的,因为我希望,源码从网络中获取,当 ...
随机推荐
- 通过Container制作Image
1.拉取tomcat镜像 docker pull tomcat docker images 2.根据tomcat镜像创建一个tomcat container docker run -d -it --n ...
- 新建zabbix数据库
1.安装mysqldnf install -y @mysqlsystemctl start mysqld.servicesystemctl enable mysqld.service初始化mysqlm ...
- R6-2 二分查找
R6-2 二分查找 分数 15 全屏浏览题目 切换布局 作者 张泳 单位 浙大城市学院 已有一个10个元素的整形数组a,且按值从小到大有序.输入一个整数x,然后在数组中查找x,如果找到,输出相应的下标 ...
- SVNKit操作SVN
系统集成SVN(SVNKit操作SVN) 网址:https://svnkit.com/documentation.html 文档:https://svnkit.com/javadoc/index.ht ...
- vi 异常退出出现 E325:Attention的解决办法
在linux系统下使用vi编辑程序的时候,没有保存退出,直接关闭了,出现了以下的情况: 打开就会显示filename.c.swap已经存在. 这是因为vi在编辑文件时会创建一个交换文件swap fil ...
- 上传媒体文件--添加显示进度条 layui的upload控件
上传媒体文件--添加显示进度条 layui的upload控件 详细上传功能请参考博客:上传文件--媒体文件+获取上传文件的属性信息 layui的upload控件 - じ逐梦 - 博客园 (cnbl ...
- imputation-文献:False signals induced by single-cell imputation(scRNA-seq插补引入的假阳性问题)
文章题目 False signals induced by single-cell imputation 中文名: 单细胞插补引起的假信号 文章地址: https://f1000research.co ...
- unity创建一个数组,让他随机生成一个东西之C#语言(有图教程)
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; ...
- windows检查
# coding: UTF-8 import psutil import platform import re def get_cpu_used(upu_base, interval=1): perc ...
- vue项目中如何使用markdown编辑器插件
1.安装mavon-editor $ npm install mavon-editor --save 需要使用Markdown编辑器的页面js中: import { mavonEditor } fro ...