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

最近遇到一个需求是有一个表单可以输入各种信息,然后还需要有一个编辑功能,点击编辑的时候需要把当前数据填入到表单里面。在网上查了很多种方法,然后我的思路是使用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.mfbz.cn/a/99427.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ZooKeeper集群环境搭建

&#x1f947;&#x1f947;【大数据学习记录篇】-持续更新中~&#x1f947;&#x1f947; 个人主页&#xff1a;beixi 本文章收录于专栏&#xff08;点击传送&#xff09;&#xff1a;【大数据学习】 &#x1f493;&#x1f493;持续更新中&#xff0c;感谢各位前辈朋友们支持…

苍穹外卖01-项目概述、环境搭建

项目概述、环境搭建 课程内容 软件开发整体介绍苍穹外卖项目介绍开发环境搭建导入接口文档Swagger 项目整体效果展示&#xff1a; 管理端-外卖商家使用用户端-点餐用户使用当我们完成该项目的学习&#xff0c;可以培养以下能力&#xff1a; 1. 软件开发整体介绍 作为一名软…

Go Map

学习了GO语言中数组&#xff0c;切片类型&#xff0c;但是我们发现使用数组或者是切片存储的数据量如果比较大&#xff0c;那么通过下标来取出某个具体的数据的时候相对来说&#xff0c;比较麻烦。例如&#xff1a; names : []string{"张三","李四","…

如何从ChatGPT中获得最佳聊天对话效果

从了解ChatGPT工作原理开始&#xff0c;然后从互动中学习&#xff0c;这是一位AI研究员的建议。 人们利用ChatGPT来撰写文章、论文、生成文案和计算机代码&#xff0c;或者仅仅作为学习或研究工具。然而&#xff0c;大多数人不了解它的工作原理或它能做什么&#xff0c;所以他…

云计算和Docker分别适用场景

在大规模网络爬虫系统中&#xff0c;通过使用云计算和Docker技术&#xff0c;可以实现大规模网络爬虫系统的高效架构设计和部署。这种架构能够提供可扩展性、高可用性和灵活性&#xff0c;为爬虫系统的运行和管理带来便利。 云计算和Docker在大规模网络爬虫系统中有不同的业务…

华为OD机试 - 字符串分割(Java 2023 B卷 100分)

目录 专栏导读一、题目描述二、输入描述三、输出描述四、解题思路1、根据题意&#xff1a;2、例如&#xff1a;3、解题思路&#xff1a; 五、Java算法源码六、效果展示1、输入2、输出3、说明 华为OD机试 2023B卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《…

算法通关村14关 | 堆在数组中找第k大的元素应用

1. 在数组中找第k大元素 题目 LeetCode215&#xff1a;给定整数数组nums和整数k&#xff0c;请返回数组中第k个最大的元素&#xff0c; 思路 解题思路用三个&#xff0c;选择法&#xff0c;堆查找和快速排序。 我们选择用大堆小堆解决问题&#xff0c;“找最大用小堆&#xff…

Python飞机大战小游戏

游戏规则&#xff1a;键盘上下左右键控制飞机移动 游戏展示图片&#xff1a; 源码&#xff1a; 第一个py命名为&#xff1a;plane_main.py import pygamefrom plane_sprites import *class PlaneGame(object):# """飞机大战主游戏"""def __in…

由于cpu cache line机制在共享原子数据操作上带来的硬件干扰对多线程机制的性能影响

由于cpu cache line机制在共享原子数据操作上带来的硬件干扰会对对多线程性能造成影响。例如不同的原子数据&#xff0c;位于同一个cpu cache line&#xff0c;这时候一个处理器读取这个cpu cache line这段数据的时候&#xff0c;就会控制这段数据的所有权&#xff0c;其他想要…

ASUS华硕VivoBook15笔记本V5200EA_X515EA原装出厂Win11预装OEM系统

华硕11代酷睿笔记本电脑VivoBook_ASUSLaptop X515EA_V5200EA原厂Windows11系统 自带显卡、声卡、网卡、蓝牙等所有驱动、出厂主题壁纸、Office办公软件、华硕电脑管家MyASUS、迈克菲等预装程序 链接&#xff1a;https://pan.baidu.com/s/1yAEdA7aiuHK4CTdGLlSOKw?pwdo45a …

ShardingJDBC——分库分表实践

摘要 本文主要介绍分表分库&#xff0c;以及SpringBoot集成基于ShardingJDBC的单库分表实践。 一、Sharding-JDBC Sharding-JDBC是ShardingSphere的第一个产品&#xff0c;也是ShardingSphere的前身。 它定位为轻量级Java框架&#xff0c;在Java的JDBC层提供的额外服务。它使…

汽车服务门店小程序模板制作指南

在数字化时代&#xff0c;一个小程序的力量不可忽视。它不仅是展示品牌形象和提供用户服务的重要工具&#xff0c;更是扩大客户群体和提高营收的关键手段。对于汽车服务门店来说&#xff0c;拥有一个精美且功能齐全的小程序&#xff0c;更将成为你在竞争激烈的市场中的重要武器…

排序算法的稳定性

稳定性&#xff1a;对于一个数&#xff0c;经过多次排序&#xff0c;保留一个数之间的相对次序 在基础类型数据上&#xff0c;稳定性用处不大 在非基础类型上&#xff0c;可以做到对于相同元素来说&#xff0c;排完序相同元素之间的相对次序不变 归并排序在merge的过程中先拷贝…

django/CVE-2017-12794XSS漏洞复现

docker搭建漏洞复现环境 漏洞原理看帮助文档 # Django debug page XSS漏洞&#xff08;CVE-2017-12794&#xff09;分析Django发布了新版本1.11.5&#xff0c;修复了500页面中可能存在的一个XSS漏洞&#xff0c;这篇文章说明一下该漏洞的原理和复现&#xff0c;和我的一点点评…

ssm星空游戏购买下载平台源码和论文PPT

ssm星空游戏购买下载平台的设计与实现112 开发工具&#xff1a;idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 技术&#xff1a;ssm 摘 要 随着科学技术的飞速发展&#xff0c;各行各业都在努力与现代先进技术接轨&#xff0c;通过科技手段提高自身的优…

【注册岩土】Python土力学与基础工程计算.PDF-土中的应力

Python 求解代码如下&#xff1a; 1&#xff0e;&#xff03;计算竖向有效自重应力2.h12#m3.h21.5#m4.h31#m5.gamma1 19# kN/m^36.gamma218# kN/m^37.gamma317# kN/m^38.sigma_c gammal * h1 gamma2*h2 gamma3 *h39&#xff0e;print&#xff08;&#xff02;竖向有效自重应力…

9.1 消息 字体 颜色 文件对话框 发布软件

保存 void Widget::on_savebtn_clicked() {QString filename QFileDialog::getSaveFileName(this, "保存", "C:/Users/yc/Desktop/", "图片 (*.png *.xpm *.jpg);;文本 (*.txt);;所有文件 (*.*)");if(filename.isNull()){QMessageBox::informa…

Lvs+KeepAlived高可用高性能负载均衡

目录 1.环境介绍 2.配置keepalived 3.测试 1.测试负载均衡 2.测试RS高可用 3.测试LVS高可用 3.1测试lvs主服务宕机 3.2.测试lvs主服务器恢复 4.我在实验中遇到的错误 1.环境介绍 环境&#xff1a;centos7 RS1---RIP1:192.168.163.145 VIP 192.168.163.200 RS2---RIP2…

PlumeLog【lite模式】部署使用

一 简述 本文档记录PlumeLog【lite模式】模式安装使用 启动模式 优点 缺点 Lite 模式 不依赖任何外部中间件直接启动使用&#xff0c;部署简单 性能有限&#xff0c;一天10G内可以应付&#xff0c;最好是SSD硬盘,适合管理系统类小玩家 Plumelog: 一个简单易用的java日志…

无人机自主飞行实战入门-第一课(简介)

研究的意义&#xff1a;对人类操作的严重依赖&#xff0c;严重阻碍了泛无人机行业的发展。 飞行汽车&#xff08;UAM&#xff09;即将到来&#xff0c;不论是从成本还是安全考虑都需要自主飞行。 传统飞控基于STM32架构设计&#xff0c;无法满足更智能功能所需的计算量&#xf…
最新文章