【react antd pro】表单中的数据转化

最新推荐文章于 2022-02-21 11:44:04 发布
最新推荐文章于 2022-02-21 11:44:04 发布
阅读量1k 收藏 1
点赞数
分类专栏： react 文章标签： react antd 表单中单个数据转化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mirror_Mx/article/details/110800820
版权

本项目的antd版本为4.x

项目中遇到的问题：

由于是动态表单，所以在按钮点击的时候提交时改变数据的格式显然是很麻烦的。
在这里插入图片描述
而且仅需要再字段类型为编辑器的时候，进行数据格式的转化，所以，能否在编辑器这个表单字段进行配置就能完成数据转化讷？
在这里插入图片描述

解决办法

查阅官网文档：
在这里插入图片描述
如下使用即可，返回的改变的值
在这里插入图片描述

mirror_Mx
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react 复杂数据的转换，把一堆从form表单获取的values一维数组的数据转换成树形结构的数据
m0_71630007的博客
04-14 208
这些数据是从form表单的values获取的，通过数字下标可以区分有几组数据，并且区分一组数据里面又有几组二级数据。至此，数据就处理好了，传给后端就可以正常调接口了。
Antd表单项将填写时的值转为小写
huanhuan03的博客
11-02 1445
Antd Form.Item getValueFromEvent
antd中前段处理字符串转为Int
weixin_47461153的博客
07-13 813
简单粗暴 首先获取到表单元素的值 gradeSum(){ const {form: {getFieldValue}} = this.props; let sum1 = parseInt(getFieldValue("cough")); let sum2 = parseInt(getFieldValue("expectoration")) let sum3 = parseInt(getFieldValue("gasp")); let sum4 = parseInt(g
ant design pro charts图表渲染之后台数据类型转换
weixin_46424838的博客
10-11 491
问题描述:图表渲染是需要的是数值类型,后台传过来的是字符串类型,导致图表无法正常渲染. 示例: 渲染饼图时,后台传过来的Total为字符串 这时就需要前端自己修改下数据,直接上代码 //字符串转数值 const strToNum = (arr: any, target: any) => { for (let i = 0; i < arr.length; i++) { for (const key in arr[i]) { if (key === targ
antdpro 中 使用 antd select 组件，defaultValue 与 value 使用问题
超逸の学习技术博客
01-19 1775
背景 简而言之，就是业务需求中虽然使用了 ProTable，但是表格列中有处理人，处理状态等需要下拉框显示的，于是用了 render 方法，结合 antd select 组件来实现。 原本是打算用 ProSelect 的，但是属于 ProForm 里面的组件，直接使用会有样式问题，还是放弃这个做法了。 使用 defaultValue 使用 defaultValue 的时候下拉切换的时候很流畅，当你下拉选择某个值之后，下拉框会先显示那个值然后再去请求接口，这个交互没啥问题。 但是这里有其它问题就是，有这个
react使用antd表单赋值,用于修改弹框的操作
01-18
补充知识：react中使用antd的表单重置数据 resetFields 重置一组输入控件的值（为 initialValue）与状态，如不传入参数，则重置所有组件 Function([names: string[]]) 注：initialValue有值时会
React+Antd-可视化拖拽表单
12-03
基于react结合antd-form，实现可视化表单拖拽，左侧为自定义所有的组件，中间为工作区，拖拽左侧到工作区，目前可以进行删除等操作，可以自己再优化添加其他功能，右侧为组件名称，描述等，可以自己优化添加其他。...
antd form表单数据回显操作
01-22
index页面有一个表格，有一个新增按钮，点击新增按钮或表格编辑弹出表单模块，如果是编辑，会回显对应的表格中的数据 //index页面 import React from 'react' import { Table, Button, message, Input, Select, ...
react+antd拖拽生成自定义表单.rar
06-08
首先，让我们了解一下`react+antd拖拽生成自定义表单.rar`这个项目的核心概念。项目使用TypeScript（TS）进行编写，这是一种在JavaScript基础上添加静态类型检查的超集。TypeScript提供更好的代码工具支持，有助于...
React+antd后台管理系统模板
12-01
React和antd结合使用，可以轻松处理这些交互，例如使用antd的Form组件进行表单数据收集，以及通过React的状态管理和生命周期方法控制组件的行为。 5. **项目结构**：典型的React项目结构通常包含src目录，其中包含...
react-react中后台管理系统开发模板antdpro
08-14
这个"react-react中后台管理系统开发模板antdpro"就是基于React和antd-pro的项目模板，旨在简化开发流程，提高开发效率。 首先，React是Facebook推出的一款JavaScript库，用于构建用户界面，尤其适合构建单页面应用...
react ant Design手动设置表单的值操作
01-22
1.设置表单的值 this.props.form.setFieldsValue({ name:”张三”, }); 2.清空表单的值 ...补充知识：react使用antd表单赋值，用于修改弹框 1、使用getFieldDecorator的initialValue 2、在state里定义一个
react+antd搭建后台管理框架
05-20
react+antd搭建前端管理框架（***支持响应式***），主要模块分为：菜单、选项卡、面包屑；通过路由监听，实现三个模块之间的联动（同时监听浏览器）；状态采用react-redux进行集中管理。目前只包含前端代码，未与...
react-antd table树形数据默认展开行实现jsx文件
12-18
react-antd table树形数据默认展开行实现jsx文件
react-react自定义搜索组件主要针对于reactantd表头搜索基于antd进行封装
08-14
针对于 react antd 表格组件中表头搜索，原则上支持所有 antd 及自定义 form 组件，如组件值与触发方法不是 value 及 onChange 则需要设置 valuePropName, validateTrigger
数据类型转换简单记录
一人心上秋的博客
11-26 225
转换数据类型为String isKey: String(item.isKey), isNullable: String(item.isNullable), isIndex: String(item.isIndex), 同理,转换其他数据类型,String换为要转换的数据类型
antd pro 的使用总结（2）
sikies的博客
11-30 910
1d.ts declare 关键字 主要用来生命全局变量。 更多关于declare 的知识：官方文档 注意：nameSpace 的一些知识 declare namespace namespace 是 ts 早期时为了解决模块化而创造的关键字，中文称为命名空间。 由于历史遗留原因，在早期还没有 ES6 的时候，ts 提供了一种模块化方案，使用 module 关键字表示内部模块。但...
React 数据传递&数据变化
麦票的博客
07-20 5695
props 在页面中引用header时,这样写&lt;Header title = 'Hellow页面' /&gt;,即给Header组件设置一个title属性,而在Header组件中可以这样取到 render() { return ( &lt;div&gt; &lt;p&gt;{this.props.tit...
【React工作记录三十八】对象的属性和值转换
geyaoisnice的博客
02-21 343
前言 我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 导语 歌谣 歌谣 这边封装了一个组件 组件里面传入的值必须有一个固定格式belongListData ? belongListData?.belongList 必须是个belongList 解决思路 if ( belon...
react ts antd 表单数据回显
最新发布
04-30
在使用React+TypeScript+Antd进行表单开发时，数据回显是一个常见需求。在实现数据回显的过程中，需要以下步骤： 1. 定义表单数据的接口类型。在React+TypeScript中，需要事先定义表单数据的类型，这样可以确保表单...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值