antd做form表单的组件共用，利用mapPropsToFields填写默认值

　　做单页应用，不管是用Vue还是React，或者其他，有一个重要的原则，就是：组件重用。

　　既然组件可以重用，那么当添加一个信息，和修改该信息的布局必然是一致的，这时候，最好的方法自然是利用同一个组件，在添加信息的时候，默认值为空，在修改的时候，默认值为后台获取到的数据。

　　看一个基础页面：

　　这是一个添加企业信息的页面，这里利用antd的form绘制了一个基础组件。到后来，需要修改企业信息的时候，发现布局部分完全一样，那么必然是继续利用该组件，只是此时需要传递props过来，以使得组件能够自动添加默认数据。

　　平常，当props变化，我们重新组织页面数据时候，经常使用的是componentWillReceiveProps这一生命周期函数，在其内部，进行数据的组织。

　　那么根据经验，此时，我们在获取到props值之后，进行数据填充。　

componentWillReceiveProps(nextProps){

    ...// 代码省略

    this.props.form.setFieldsValue(setFieldsValue.data)

}

　　可是，当我们回过头看一下antd的文档的时候，会发现一个令人崩溃的事实。

　　会导致死循环，这就尴尬了，那么怎么解决初始值呢？

　　继续查看文档：

　　这不就是正好是我们当前出现困局的原因么！数据存在上层组件，需要传递过来，那么下面的事情就是怎么使用mapPropsToFields的问题了。继续看文档，发现mapPropsToFields居然是Form.create(options)中options的配置项。那不就得了，配呗！可是我们是不是有一个疑惑，配完之后，怎么应用到组件当中呢？

　　尴尬的是，无论如何我们都没有再文档中看到怎么应用到组件当中。只有一个简单的示例：

mapPropsToFields(props) {

    return {

      username: Form.createFormField({

        ...props.username,

        value: props.username.value,

      }),

    };

  }

　　如果不仔细去扒拉扒拉的话，跟本不明白这个示例是个什么意思。

　　通过多次试验，发现mapPropsToFields的返回对象的key值，其实就是我们在组件当中利用getFieldDecorator设置的关键字，只要配置正确，不需要额外的应用，配置完，antd会帮我们应用到组件当中。那我们就写一个具体的例子。

export default Form.create({

  mapPropsToFields (props) {

    ... //省略代码

    return props.auth ? {

      ownerNature: Form.createFormField({

        value: props.auth.ownerNature

      }),

      ownerName: Form.createFormField({

        value: props.auth.ownerName

      }),

      cidNumber: Form.createFormField({

        value: props.auth.cidNumber

      }),

      registeredCapital: Form.createFormField({

        value: props.auth.registeredCapital

      })

    } : {}

  }

})(componentName)

　　这里多一步三目运算是因为当我们在添加企业信息的时候，是没有初始值的，如果不返回空对象的话，组件内部就报错了。这里的‘ownerNature’， 'ownerName'， 'cidNumber'， 'registeredCapital'，甚至更多，都是在render函数里面，通过getFieldDecorator定义的，必须value关键词存储其真实的数据。

　　至此，该Form表单算是可以真正的重用了。说实话，相比较而言，这里似乎比起Vue的v-model设计的数据双向绑定复杂多了。

　　但是，这时候，如果页面上有重置按钮的话，那么还得注意，当修改信息的时候，不是直接resetFieldsValue，而是需要通知父组件重新请求数据，以达到恢复默认数据的目的。

巴特西

antd做form表单的组件共用，利用mapPropsToFields填写默认值

最新文章

热门文章