reactantd(12)动态表单的默认值问题

news2024/10/7 12:18:17

最近遇到一个需求是有一个表单可以输入各种信息,然后还需要有一个编辑功能,点击编辑的时候需要把当前数据填入到表单里面。在网上查了很多种方法,然后我的思路是使用initialValues搭配setState()使用。默认值都为空,然后点击单条数据时把该条数据需要的字段setState()更新。

// Table组件的columns
[
        {
            xxx
        },
		{
			title: '操作',
			key: 'operator',
			dataIndex: 'operator',
			align: "center",
			width: 100,
			render: (item, record) => {
				return (
					<div>
						<Button type='primary' onClick={()=> openModal(record)}>编辑</Button>
					</div>
				)
			}
		 },
]



	const openModal = (record) => {
        // 有传record说明是点击编辑
		if (record) {
            this.setState({
             //在这里把你需要填入的字段进行setState   
             })
		}
	}

 注意在setState的时候要按照antd需要的数据结构进行传递,以上面的祝福语列表这个Form.Item为例,此时blessing_list需要是有个数组,里面的每一项就是一行数据,["xxx","yyy"]在页面上就是如下图所示,默认是两条数据的。其他的input和select也是类似的做法。

<Form.Item
	className={styles.formItem}
    name='blessing_list'
	label='祝福语列表'
	rules={[{ required: true, message: '请填写祝福语列表!' }]}
	initialValue={blessing_list}
>
	<Form.List name="blessing_list">
		{(fields, { add, remove }) => (
			<>
			{fields.map(({ key, name, fieldKey, ...restField }, index) => (
			    <Space key={key} align="baseline">
				    <Form.Item
					    style={{ flex: 1 }}
						{...restField}
						name={[name]}
						width={'100%'}
						fieldKey={[fieldKey]}
						label={`祝福语${index + 1}`}
						rules={[{ required: true, message: '请填写祝福语!' }]}
					>
						<Input style={{ flex: 1 }} />
					</Form.Item>
						<MinusCircleOutlined onClick={() => remove(name)} width={20} />
				</Space>
			))}
	    <Form.Item>
			<Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
				新增祝福语
			</Button>
	    </Form.Item>
			</>
			)}
    </Form.List>
</Form.Item>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/947134.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Microsoft Edge 主页启动diy以及常用的扩展、收藏夹的网站

一、Microsoft Edge 主页启动diy 二、常用的扩展 1、去广告&#xff1a;uBlock Origin 2、翻译&#xff1a; 页面翻译&#xff1a;右键就有了&#xff0c;已经内置了划词翻译 3、超级复制 三、收藏夹的网站

函数(个人学习笔记黑马学习)

1、函数定义 #include <iostream> using namespace std;int add(int num1, int num2) {int sum num1 num2;return sum; }int main() {system("pause");return 0; } 2、函数的调用 #include <iostream> using namespace std;int add(int num1, int num2…

java内存模型讨论及案例分析

常用内存选项 -Xmx&#xff1a; 最大堆大小 -Xms&#xff1a;最小堆大小 -Xss &#xff1a;线程堆栈大小&#xff0c;默认1M 生产环境最好保持 Xms Xmx java内存研究 内存布局 可见&#xff1a; 堆大小 新生代 老年代&#xff0c;新生代EFrom SurvivorTo Survivor。新…

【数学建模竞赛】各类题型及解题方案

评价类赛题建模流程及总结 建模步骤 建立评价指标->评价体系->同向化处理&#xff08;都越多越好或越少越少&#xff09;->指标无量纲处理 ->权重-> 主客观->合成 主客观评价问题的区别 主客观概念主要是在指标定权时来划分的。主观评价与客观评价的区别…

Vulnhub内网渗透DC-6靶场通关

个人博客 xzajyjs.cn IP DC-6: 192.168.168.4 Kali: 192.168.168.5 信息搜集 arp-scan -l # nmap -sn 192.168.168.0/24进行主机发现&#xff0c;探测到靶机IP。 使用nmap进行端口扫描 nmap -sV -A 192.168.168.4开放了一个ssh和http端口&#xff0c;80端口是wordpress5.1…

MinIO框架安装使用+实现上传需求

MinIO框架 什么是MinIO框架如何安装&#xff08;Docker版&#xff09;安装步骤1. 查询MinIO的服务版本2. 拉取MinIO3.启动报错在docker中没有操作文件的权限 4. 访问 简单配置1.找到创建用户界面2. 设置用户信息3. 创建一个桶 使用MinIO依赖搭建MinIO的初始化API存储桶的基本操…

uniapp 开发小程序,封装一个方法,让图片使用线上地址

1.在main.js文件中&#xff0c;添加以下代码&#xff1a; 复制使用&#xff1a; // 图片使用网络地址 Vue.prototype.localImgSrc function(img){//项目的地址域名&#xff0c;例如百度return "https://baidu.cn/static/index/images/" img; }2.在页面中直接使用&…

PMP是什么?项目管理证书好考吗?

PMP是由项目管理协会&#xff08;Project Management Institute&#xff0c;简称PMI&#xff09;发起的项目管理专业人士资格认证&#xff0c;严格评估项目管理人员知识技能是否具有高品质的资格认证考试。PMP证书究竟难不难考呢&#xff1f;接下来的文章将简要讨论PMP证书的考…

git 基础

1.下载安装Git&#xff08;略&#xff09; 2.打开git bash窗口 3.查看版本号、设置用户名和邮箱 用户名和邮箱可以随意起&#xff0c;与GitHub的账号邮箱没有关系 4.初始化git 在D盘中新建gitspace文件夹&#xff0c;并在该目录下打开git bash窗口 git init 初始化完成后会…

【微服务部署】06-日志集成

文章目录 1. EFK日志三件套集成1.1 核心组件1.2 部署 2. Exceptionless日志系统2.1 Exceptionless核心特性2.2 Exceptionless部署文件2.3 K8s中使用Exceptionless 1. EFK日志三件套集成 1.1 核心组件 Elasticsearch&#xff08;存储&#xff09;Fluentd&#xff08;收集器&am…

文件上传漏洞-upload靶场3-4(全网最详细解读)

文件上传漏洞-upload靶场3-4关通关笔记&#xff08;全网最详细解读&#xff09; upload 第三关&#xff08;特殊后缀&#xff09; 思路 按照第一关和第二关的思路&#xff0c;先随便上传一个文件用burpsuite工具抓包&#xff0c;看它到底是前段验证还是后端验证。 上传一个we…

ADB安装及命令-自用查询

常用ADB命令整理 ADB简介常用命令整理查看设备及安装卸载屏幕事件⽇志查询查询系统服务情况其它 adb 命令 ADB安装ADB连接设备Android 实体机连接准备Android 虚拟机连接准备 ADB简介 ADB&#xff0c;即 安卓调试桥 (Android Debug Bridge, adb)&#xff0c;它是 Android 开发…

分布式系统的多数据库,实现分布式事务回滚(1.7.0 seata整合2.0.4nacos)

正文 1、解决的应用场景是分布式事务&#xff0c;每个服务有独立的数据库。 2、例如&#xff1a;A服务的数据库是A1&#xff0c;B服务的数据库是B2&#xff0c;A服务通过feign接口调用B服务&#xff0c;B涉及提交数据到B2&#xff0c;业务是在B提交数据之后&#xff0c;在A服…

数学建模:层次分析法

&#x1f506; 文章首发于我的个人博客&#xff1a;欢迎大佬们来逛逛 层次分析法 步骤描述 将问题条理化&#xff0c;层次化&#xff0c;构建出一个有层次的结构模型。层次分为三类&#xff1a;目标层&#xff0c;准则&#xff08;指标&#xff09;层&#xff0c;方案层。比…

Mybatis1.6 添加数据

1.6 添加数据 1.6.1 编写接口方法1.6.2 编写SQL语句1.6.3 编写测试方法1.6.4 添加-主键返回 如上图是我们平时在添加数据时展示的页面&#xff0c;而我们在该页面输入想要的数据后添加 提交 按钮&#xff0c;就会将这些数据添加到数据库中。接下来我们就来实现添加数据的操作。…

前端调用电脑摄像头

项目中需要前端调用&#xff0c;所以做了如下操作 先看一下效果吧 主要是基于vue3&#xff0c;通过canvas把画面转成base64的形式&#xff0c;然后是把base64转成 file文件&#xff0c;最后调用了一下上传接口 以下是代码 进入页面先调用一下摄像头 navigator.mediaDevices.ge…

低成本32位单片机电动工具无感方波控制方案

RAMSUN介绍基于灵动32位微处理器MM32SPIN0230的BLDC电动工具无感方波控制方案&#xff0c;包括MM32SPIN0230芯片资源。 以下是电动工具无感方波控制方案的简述&#xff1a; MM32SPIN0230电动工具专用板 芯片介绍 MM32SPIN0230系列是灵动微MindSPIN旗下高性能的单电机控制产品…

04-基础例程4

基础例程4 1、RGB彩灯 实验介绍 ​ WS2812B是一款智能控制的LED光源&#xff0c;控制电路和RGB芯片集成在一个5050组件的封装中。 ​ 可以将多个RGB灯珠级联&#xff0c;如下图所示&#xff1a; ​ 3个最基本的颜色为红、绿、蓝&#xff08;RGB&#xff09;&#xff0c;均是…

Elasticsearch实战(三):Springboot实现Elasticsearch搜索推荐

文章目录 系列文章索引一、什么是搜索推荐二、新增测试数据三、搜索推荐的实现1、es官网2、Java实现搜索推荐3、总结 系列文章索引 Elasticsearch实战&#xff08;一&#xff09;&#xff1a;Springboot实现Elasticsearch统一检索功能 Elasticsearch实战&#xff08;二&#x…

Python asyncio 性能分析

文章目录 1. 工具1.1 cProfile2.1 yappi 2. 可视化2.1 SnakeViz2.2 gprof2dot 1. 工具 1.1 cProfile 一般对分析python性能的工具都会用cprofile。但是这玩意对多线程和asyncio的支持并不友好&#xff0c;如果用它对asyncio分析&#xff0c;会发现CPU都耗费在了poll上面&…