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,一经查实,立即删除!

相关文章

从零开始学习 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…

【微服务部署】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…

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 是一种…

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…

电子电路原理题目整理(1)

电子电路原理题目整理&#xff08;1&#xff09; 最近在学习《电子电路原理》&#xff0c;记录一下书后面试题目&#xff0c;答案为个人总结&#xff0c;欢迎讨论。 1.电压源和电流源的区别&#xff1f; 电压源在不同的负载电阻下可提供恒定的负载电压&#xff0c;而电流源对于…

Docker容器与虚拟化技术:Harbor私有仓库部署与迁移

目录 一、理论 1.本地私有仓库 2.Harbor 二、实验 1.Docker搭建本地私有仓库 2.docker-compose部署及配置 3.harbor部署及配置 4.登录创建项目 5.在其他客户端上传镜像 6. harbor维护 7.移除 Harbor 服务容器同时保留镜像数据/数据库&#xff0c;并进行迁移 三、问题…

ssm+vue校园教务系统源码和论文

ssmvue校园教务系统源码和论文086 开发工具&#xff1a;idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 技术&#xff1a;ssm 1、课题背景 信息系统的目的是让人可以高效的进行工作&#xff0c;包括对信息的一-系列操作&#xff0c;如添加信息、修改信…

论文阅读_扩散模型_SDXL

英文名称: SDXL: Improving Latent Diffusion Models for High-Resolution Image Synthesis 中文名称: SDXL&#xff1a;改进潜在扩散模型的高分辨率图像合成 论文地址: http://arxiv.org/abs/2307.01952 代码: https://github.com/Stability-AI/generative-models 时间: 2023-…

【MySQL】4、MySQL备份与恢复

备份的主要目的是灾难恢复&#xff0c;备份还可以测试应用、回滚数据修改、查询历史数据、审计等 MySQL日志管理 MySQL 的日志默认保存位置为 /usr/local/mysql/data #配置文件 vim /etc/my.cnf 日志的分类 常见日志有&#xff1a; 错误日志&#xff0c;一般查询日志&…

Linux常用命令——dd命令

在线Linux命令查询工具 dd 复制文件并对原文件的内容进行转换和格式化处理 补充说明 dd命令用于复制文件并对原文件的内容进行转换和格式化处理。dd命令功能很强大的&#xff0c;对于一些比较底层的问题&#xff0c;使用dd命令往往可以得到出人意料的效果。用的比较多的还是…