关于ant-design表单问题

杭州前端工程师

发布于 2018-06-15 11:53:15

1K0

发布于 2018-06-15 11:53:15

需求是这样的,当我改变名称的时候,编码会调用后端的一个接口,然后展示到页面上,像这类如果用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)
    }
  }
}

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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

react