Ant Design使用问题记录

  公司的测试管理平台前端使用的是Ant Design of React框架,后台使用的是python,数据库用的是mysql。没有参与前期的开发,听说是工作了10年积累下来的一个暂且可用的管理平台,开发了10年,目前公司也没有怎么用起来......不由地吐槽了一下,看了前端和后台的代码,简直想哭的心都有了。问的稍微深一点的问题,就说不知道,自己看,自己调试,我也就只能呵呵呵,后面有问题干脆不开口了,省得诧异与无奈了,告诫自己的就是:虽然领导不靠谱,但不要学习他对技术的态度,时刻保持清醒,不被同化,是我最后的倔强了。吐槽完了,记录问题。

  问题一:项目需要,在测试管理平台上开发一个场景指令录入与维护的界面,只负责录入数据、修改数据、展示数据,不保存到平台数据库,数据保存到云端。云端提供增、删、改、查接口。功能很简单,开发完成,联调的时候出现了一个问题:指令集是通过table组件来录入的,各指令通过Input.TextArea展示,其中一个指令为“是否必须”,项目要求为数字格式,0否1是。Input.TextArea的value属性的类型是string,那就在保存的时候转一下格式,代码:

//后端要求将是否必须保存为数字类型的,input的value默认为string类型,故保存的时候需要将其转换为数字类型
this.range(0, this.state.instructions.length, (i)=>{
    this.state.instructions[i].isNecessary = Number(this.state.instructions[i].isNecessary)
})

  本以为应该不会有问题了,保存完显示时,1可以展示,0就不行,想想是不是应该把从数据库获取数字类型的值转换为字符串,就试试吧:

//input输入框只接受字符串的类型,这里再将数字类型转换为字符串类型显示this.range(0, this.state.instructions.length, (i)=>{
    this.state.instructions[i].isNecessary = this.state.instructions[i].isNecessary.toString()
})

  再打开查看保存的数据,显示出来了。回想一下整个现象,Input.TextArea的value属性的类型是string,只接受string类型的value,两次转换总觉得变扭。看了一下官网,还有一个InputNumber组件,或许可以考虑使用。

  那么问题来了:为什么同为数字,1可以显示,0却不可以显示?或许没有抓到问题的根本。

  问题二:等待使用......

原文地址:https://www.cnblogs.com/zoe-yan/p/10445136.html

时间: 2024-07-31 23:23:06

Ant Design使用问题记录的相关文章

使用express、react、webpack打包、socket.io、mongodb、ant.design、less、es6实现聊天室

拿到一个项目,我们应该如何去完成这个项目呢. 是直接上手? 还是先进行分析,然后再去解决呢?毫无疑问,如果直接上手解决,那么可能会因为知道目标所在,而导致出现各种问题. 所以,我们应该系统的分析这个项目,然后再去完成. 第一步: 需求 除了上面的基本需求之外,我们还需要实现登录.注册的相关功能,这样可以保证用户的唯一性,并在后台做出记录. 第二步:确定技术栈 express --- 首先,作为前端使用node就可以取代后端java.php开发的工作,对于这个项目是必须的.作为node的框架,ex

如何创建Pull Request,以开源项目ant design pro为例

声明:本文章也是我本人参考网络上的一些教程写的,毕竟我也是第一次为开源项目做贡献,心里难免有点小激动.所以用此文章来记录这个过程,和一些操作方式.同时留作以后可供参考. 背景:最近做了公司一个项目,具体项目我也就不说了,反正用了React+Umi+Ant Design Pro.具体情况是这样,使用官方的SettingDrawer实现了在线切换主题的功能,但是官方的控件中会有如下拷贝设置按钮一直显示. 然而我想要的效果如右图 可是我的项目上线后,不需要复制主题配置进行分享,仅开发过程中设置默认主题

Ant Design of React的安装和使用方法

在中台产品的研发过程中,会出现不同的设计规范和实现方式,但其中往往存在很多类似的页面和组件,给设计师和工程师带来很多困扰和重复建设,大大降低了产品的研发效率.我们(蚂蚁金服体验技术部)经过大量的项目实践和总结,沉淀出一个中台设计语言 Ant Design.旨在统一中台项目的前端 UI 设计,屏蔽不必要的设计差异和实现成本,解放设计和前端的研发资源. Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言.它模糊了产品经理.交互设计师.视觉设计师.前端工程师.开发工程师等

react + es6 +ant design 实现一个简单demo表格添加删除

首先介绍一下整体的样式及实现的效果 如图所示,点击添加按钮会接着后面新增一行,点击操作下的删除图标将会删掉一行,如果删掉序号为1的行,第二行会自动变成第一行序号也会随之改变. ps:数据交互均还未实现. 介绍完毕:下面正题! 1.布局 import React, { Component, PropTypes } from 'react';import { Table, DatePicker, Select, InputNumber, Input, Button, Icon } from 'ant

如何利用Facebook的create-react-app脚手架创建一个基于ant design mobile的项目

引言: create-react-app是Facebook发布的一款全局的命令行工具用来创建一个新的项目. 通常我们开始做一个react web或者 app 项目的时候,都会自己利用 npm 或者 yarn 安装项目所需要的一些依赖,再写 webpack.config.js ,一系列复杂的配置,搭建好开发环境后写src源代码. 现在,如果你想要搭建一个完整的 react 项目环境,已经不需要自己动手布置许许多多的东西,利用 create-react-app 工具,就能轻松帮你配置好一个 reac

2017.11.6 - ant design table等组件的使用,以及 chrome 中 network 的使用

一.今日主要任务 悉尼小程序后台管理开发: 景点管理页面: 获取已有数据列表,选取部分数据呈现在表格中,根据景点名称.分类过滤出对应的景点. 二.难点 1. 项目技术选取: ant design.react.es6: 2. 在此之前,只看过一点点 es6 的语法,未实操:react 也只是看过语法,未实操:ant design 是个什么鬼,第一次听说. 3. 所遇的主要问题: (1)ant design 中 table 组件的使用: 引入 Table.Buttton.Col.Row.Select

使用Facebook的create-react-app脚手架快速构建React开发环境(ant.design,redux......)

 create-react-app是来自于Facebook出品的零配置命令行工具,能够帮你自动创建基于Webpack+ES6的最简易的React项目模板 1:首先在webstorm中新建一个项目 2:倘若不是最新版本的npm   ,   安装最新版本npm     npm install npm @latest 3: 安装项目中常用的相关的配置 yarn add react-redux redux redux-thunk react-router-dom thunk [email protect

实战 ant design pro 中的坑

1.前戏: 1,替换mock数据: 1.将:.roadhogrc.mock.js 中的代理模式替换 当不使用代理的时候就会将所有 /api/*的链接换成 http://localhost:8080/ export default noProxy ? {'GET /api/*':'http://localhost:8080/'} : delay(proxy, 1000); 2.启动: window:npm run start:no-proxy 其他系统没试 坑 1. what?这是什么鬼没设置ke

ant design form表单的时间处理

ant design form表单的时间处理 用ant design开发程序时,会碰到时间的字段,效果如下: 那么该怎么处理呢?可以在表单中使用如下代码: import { DatePicker } from 'antd' import Moment from 'moment' <FormItem label="开始时间" {...formItemLayout}> { getFieldDecorator('sdate', { initialValue: item.sdate