关于ant-design表单问题

需求是这样的,当我改变名称的时候,编码会调用后端的一个接口,然后展示到页面上,像这类如果用state,setState的话也是非常方便就能解决的,但是这个页面涉及编辑,新增,如果单独拿一个state的值来设,感觉有些不爽,而且目前用的redux-saga来写的全局代码,不准备用state.

下面是这个区域代码

const modalItems = [
  {
    type: 'select',
    label: '设备类型',
    paramName: 'equipTypeId',
    initialValue: comeFromEdit.equipTypeId || this.props.myDeviceType[0] ? this.props.myDeviceType[0].value : '',
    span: 12,
    width: 138,
    option: [
      ...this.props.myDeviceType
    ],
    rules: rules.requiredSelect
  },
  {
    type: 'input',
    label: '设备名称',
    paramName: 'equipName',
    initialValue: comeFromEdit.equipName || '',
    placeholder: '请输入',
    span: 12,
    onBlur: this.equipNameChange.bind(this),
    width: 138,
    rules: rules.required
  },
  {
    type: 'text',
    label: '设备编码',
    paramName: 'equipCode',
    initialValue: comeFromEdit.equipCode || '',
    span: 12,
    width: 138,
    rules: rules.required
  },
  {
    type: 'input',
    label: '设备型号',
    paramName: 'equipModel',
    initialValue: comeFromEdit.equipModel || '',
    placeholder: '请输入',
    span: 12,
    width: 138,
  },
  {
    type: 'input',
    label: '制造厂家',
    paramName: 'equipCompany',
    initialValue: comeFromEdit.equipCompany || '',
    placeholder: '请输入',
    span: 12,
    width: 138
  },
  {
    type: 'input',
    label: '出租方',
    paramName: 'lessor',
    initialValue: comeFromEdit.lessor || '',
    placeholder: '请输入',
    span: 12,
    width: 138,
    rules: rules.required
  },
];

页面会根据这些数据然后驱动页面生成信息.

我把所有的初始值都直接先放上去了.

接下来是问题:

当我没有点保存的时候,编码会根据名称的变化而变化,

当我点了保存后,编码则不动了.

问题根源:

根据官方页面介绍,看不出什么原因(反正我看不明白).

据我的理解,是在点保存的时候,页面把编码的initalValue设置成了value,而value会把initalValue给覆盖了,再不能用initalValue来改变值了,事实也证明了这一点,我在react生命周期里,通过this.props.form.setFeildsValue()方法来改变编码的值就行的通了.代码如下:

componentWillReceiveProps(nextProps){
  if(nextProps.comeFromEdit.equipCode !== this.props.comeFromEdit.equipCode){
    try{
      this.props.form.setFieldsValue({
        equipCode:nextProps.comeFromEdit.equipCode
      })
    }catch (e){
      console.log(e)
    }
  }
}

多踩一个坑,以后就少一个!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

Go语言的网络编程简介

本文通过 Go 语言写几个简单的通信示例,从 TCP 服务器过渡到 HTTP 开发,从而简单介绍 net 包的运用。 TCP 服务器 首先来看一个 TCP 服务...

384150
来自专栏nummy

Grunt快速入门

Grunt是基于JavaScript的命令行构建工具,它可以帮助开发者们自动化重复性的工作。你可以把它看成是JavaScript下的Make或者Ant。它可以完...

9520
来自专栏SDNLAB

OpenDaylight与Mininet应用实战之三层转发机制四

本文属于该专题中的进阶篇,主要讲解ODL应用不同网段的三层数据转发机制,在OpenDaylight与Mininet应用实战之流表操作(三)中会涉及到相同网段的二...

51260
来自专栏Java与Android技术栈

android studio加速编译

1 修改项目的gradle.properties文件 将#org.gradle.parallel=true 去掉注释,增加org.gradle.daemon=...

10520
来自专栏蘑菇先生的技术笔记

Go中链路层套接字的实践

接上次的博客,按照约定的划分,还有一层链路层socket。这一层就可以自定义链路层的协议头部(header)了,下面是目前主流的Ethernet 2(以太网)标...

15720
来自专栏有趣的django

python爬虫人门(10)Scrapy框架之Downloader Middlewares

设置下载中间件(Downloader Middlewares)  下载中间件是处于引擎(crawler.engine)和下载器(crawler.engine.d...

38580
来自专栏hotqin888的专栏

beego操作session

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

14510
来自专栏Golang语言社区

【转】Go语言Http Server源码阅读

目录(?)[-] 前言 几个重要概念 具体分析 几个接口 Handler ResponseWriter Flusher Hijacker response H...

29740
来自专栏CRPER折腾记

React 折腾记 - (5) 记录用React开发项目过程遇到的问题(Webpack4/React16/antd等)

技术栈: react@16.6.0/ react-router-dom@v4 / webpack^4.23.1(babel7+)

25420
来自专栏刘望舒

Android Apk安装过程解析

静默安装 apk安装流程简析 installd进程意义 最近工作上遇到静默安装相关的内容,顺便学习一下apk安装的知识

35860

扫码关注云+社区

领取腾讯云代金券