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.ItemclassName={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.Itemstyle={{ 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.mzph.cn/news/59066.shtml

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

相关文章

数学建模:ARMA时间序列预测

&#x1f506; 文章首发于我的个人博客&#xff1a;欢迎大佬们来逛逛 ARMA预测 时间序列是按时间顺序的一组数字序列 时间序列的特点&#xff1a; 现实的、真实的一组数据&#xff0c;时间序列背后是某一现象的变化规律&#xff0c;时间序列预测就是学习之前的规律来预测后面…

从零开始学习 Java:简单易懂的入门指南之查找算法及排序算法(二十)

查找算法及排序算法 常见的七种查找算法&#xff1a;1. 基本查找2. 二分查找3. 插值查找4. 斐波那契查找5. 分块查找6. 哈希查找7. 树表查找 四种排序算法&#xff1a;1. 冒泡排序1.1 算法步骤1.2 动图演示1.3 代码示例 2. 选择排序2.1 算法步骤2.2 动图演示 3. 插入排序3.1 算…

knife4j 整合 springboot

官方文档&#xff1a;https://doc.xiaominfo.com/knife4j 版本兼容说明&#xff1a;https://doc.xiaominfo.com/docs/quick-start/start-knife4j-version 升级说明&#xff1a;https://doc.xiaominfo.com/docs/upgrading/upgrading-to-v4版本兼容惯关系&#xff1a; springboot…

MySQL一行记录是如何存储的?

目录 MySQL的数据存放在哪个文件&#xff1f; 表空间文件的结构是怎么样的&#xff1f; 1、行&#xff08;row&#xff09; 2、页&#xff08;page&#xff09; 3、区&#xff08;extent&#xff09; 4、段&#xff08;segment&#xff09; InnoDB 行格式有哪些&#xf…

解读亚马逊云科技语义搜图检索方案

图像检索&#xff08;包括文搜图和图搜图&#xff09;是各个行业中常见的一个应用场景。比如在电商场景中&#xff0c;基于以图搜图做相似商品查找&#xff1b;在云相册场景中&#xff0c;基于文搜图来找寻所需的图像素材。 传统基于标签的图像检索方式&#xff0c;即先使用目标…

博流RISC-V芯片Eclipse环境搭建

文章目录 1、下载 Eclipse2、导入 bouffalo_sdk3、编译4、烧录5、使用ninja编译 之前编译是通过 VSCode 编译&#xff0c;通过手工输入 make 命令编译&#xff0c;我们也可以通过 Eclipse 可视化 IDE 来编译、烧录。 1、下载 Eclipse 至 Eclipse 官网 https://www.eclipse.org…

【Golang】go交叉编译

交叉编译是用来在一个平台上生成另一个平台的可执行程序 。Go 命令集是原生支持交叉编译的。 Mac下编译&#xff1a;Linux 或 Windows 的可执行程序 # linux 可执行程序 CGO_ENABLED0 GOOSlinux GOARCHamd64 go build main.go # Windows可执行程序 CGO_ENABLED0 GOOSwindow…

网络socket服务器开发几种并发模型详解

目录 一、socket创建流程。 二、I/O多路复用 三、服务器开发常见的并发模型 1、模型一:单线程——无IO复用 1.1 模型分析 2、模型二:单线程accept + 多线程读写业务(无IO复用) 模型分析 3、模型三:单线程多路IO复用 模型分析 4、模型四࿱

【微服务部署】02-配置管理

文章目录 1.ConfigMap1.1 创建ConfigMap方式1.2 使用ConfigMap的方式1.3 ConfigMap使用要点建议 2 分布式配置中心解决方案2.1 什么时候选择配置中心2.2 Apollo配置中心系统的能力2.2.1 Apollo创建配置项目2.2.2 项目使用2.2.3 K8s中使用Apollo 1.ConfigMap ConfigMap是K8s提供…

【第1章 数据结构概述】

目录 一. 基本概念 1. 数据、数据元素、数据对象 2. 数据结构 二. 数据结构的分类 1. 数据的逻辑结构可分为两大类&#xff1a;a. 线性结构&#xff1b;b. 非线性结构 2. 数据的存储结构取决于四种基本的存储方法&#xff1a;顺序存储、链接存储、索引存储、散列存储 3. …

iMX6ULL 库移植 | Libgpiod 库的交叉编译及使用指南(linux)

GPIO口的操作&#xff0c;是很常见的功能。传统的GPIO sysfs接口已被弃用。自Linux 4.8起&#xff0c;内核提供了全新的操作gpio的方式libgpiod&#xff08;C library and tools for interacting with the linux GPIO character device&#xff09;&#xff0c;当然也更高效&am…

大数据Flink简介与架构剖析并搭建基础运行环境

文章目录 前言Flink 简介Flink 集群剖析Flink应用场景Flink基础运行环境搭建Docker安装docker-compose文件编写创建并运行容器访问Flink web界面 前言 前面我们分别介绍了大数据计算框架Hadoop与Spark,虽然他们有的有着良好的分布式文件系统和分布式计算引擎&#xff0c;有的有…

电脑识别不了固态硬盘怎么办?

在使用固态硬盘时&#xff0c;可能会出现电脑无法识别的情况&#xff0c;这时我们就无法使用固态硬盘中的数据。那么&#xff0c;电脑识别不了固态硬盘怎么办&#xff1f; 为什么电脑识别不了固态硬盘&#xff1f; 一般来说&#xff0c;电脑识别不了固态硬盘是因为以下3个原因…

软件工程(八) UML之类图与对象图

1、类图与对象图 1.1、类图与对象图的概念 类图(class diagram)描述一组类、接口、协作和它们之间的关系 对象图(object diagram)描述一组对象及它们之间的关系、对象图描述了在类图中所建立的事物实例的静态快照。 1.2、类图与对象图的区别 类图和对象图基本上是一样…

Python Opencv实践 - Canny边缘检测

import cv2 as cv import numpy as np import matplotlib.pyplot as pltimg cv.imread("../SampleImages/pomeranian.png", cv.IMREAD_GRAYSCALE) print(img.shape)#图像Canny边缘检测 #cv.Canny(image, threshold1, threshold2[, edges[, apertureSize[, L2gradien…

C++中组合使用多个 if…else 结构

C中组合使用多个 if…else 结构 需要根据多个条件执行不同任务时&#xff0c;嵌套 if 语句很有用&#xff0c;也可组合使用多个 if…else 结构。 C 中的 if…else if…else 语句的语法&#xff1a; if(boolean_expression 1) {// 当布尔表达式 1 为真时执行 } else if( bool…

python web 开发与 Node.js + Express 创建web服务器入门

目录 1. Node.js Express 框架简介 2 Node.js Express 和 Python 创建web服务器的对比 3 使用 Node.js Express 创建web服务器示例 3.1 Node.js Express 下载安装 3.2 使用Node.js Express 创建 web服务器流程 1. Node.js Express 框架简介 Node.js Express 是一种…

python进行压图操作

大家想不想使用python完成批量图片压logo的操作&#xff0c;今天我就来分享一下压图片的教程&#xff0c;喜欢的同学&#xff0c;一键三连呦下面的分享给大家的代码 from PIL import Imageclass PressurePic:def __init__(self):passdef remove_logo_black_background(self, i…

Spring boot中调用C/C++(dll)

添加JNA依赖 <dependency><groupId>net.java.dev.jna</groupId><artifactId>jna</artifactId><version>5.5.0</version> </dependency>准备C代码/C代码 如下是C代码&#xff0c;文件名&#xff1a;xizi.c #include <std…

Redis —— 设置密码

文章目录 Redis —— 设置密码简介需要修改两处1.命令行进入Redis进行密码修改2.修改Redis配置(redis.conf) 修改后重启redis Redis —— 设置密码 简介 没有密码&#xff0c;设置密码 需要修改两处 1.命令行进入Redis进行密码修改 # 首先登录到对应节点....... # 通过redi…