关于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 条评论
登录 后参与评论

相关文章

来自专栏惨绿少年

Python入门篇

2084
来自专栏我是业余自学C/C++的

各种编码

1583
来自专栏C#

DotNet友元程序集解析

   项目开发的过程中,调试使用的可能是最多的操作。任何代码写出来都需要经过调试和整合,以此扩展和提升程序的稳定性和可靠性。谈到.NET的单元测试,在这里就得提...

1887
来自专栏吾爱乐享

php学习之html的标签属性(二)

1102
来自专栏JackieZheng

AngularJS in Action读书笔记1——扫平一揽子专业术语

前(fei)言(hua):   数月前,以一个盲人摸象的姿态看了一些关于AngularJS的视频书籍,留下了我个人的一点或许是指点迷津或许是误人子弟的读后感。自...

1767
来自专栏技术小黑屋

为什么我要改用Kotlin

写在前面的话,作为一个不熬夜的人,一觉醒来发现Kotlin成为了Android的官方语言,可谓是大喜过望。为了趁热打铁,我决定提前三天放出原定本周日Releas...

562
来自专栏flutter开发者

[Flutter Widget]ExpansionTile

在前面的文章红我们学习了Chip的用法,使用Chip可以很方便的完成对想要的东西打上想要的标签。在文章的最后让大家实现如下的效果

961
来自专栏有趣的Python和你

Python爬虫之小猪短租房一、xpath爬取分析二、代码三、简单分析四、问题

1012
来自专栏java思维导图

java基础扫盲--字节、字符、位

历史问题 大家都知道计算机这东西是洋鬼子搞出来的,他的底层实现是二进制。也就是说,计算机里面,二进制,简简单单的0和1可以表示世间万物,可以创造世间万物。 ...

3438
来自专栏菩提树下的杨过

全世界最短IE判定if(!+[1,])的解释

虽然从司徒先生的博客上看到 全世界最短的IE判定 很长时间了,却一直对于原理没怎么去细看,今天同事(也是一后台程序员,并非前端)又问到这个问题,于是我这个前端外...

1946

扫码关注云+社区