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，而是須要通知父組件從新請求數據，以達到恢復默認數據的目的。