React多層級表單

---------------------- 此方案已棄用 ----------------------

棄用原因：

渲染[大型表單]時會卡頓。增加表單項過多會卡頓。小型表單可以使用。

此方案當時設計時，增加及刪除表單項是強制整個表單重新渲染，考慮欠佳。

項目中已使用 rc-field-form 重新封裝。

rc-field-form 采用增量更新方式，性能比 rc-form 提升很多，提供了 List 組件自帶增加刪除表單項，仍要考慮避免不必要的更新。

ant-design 目前表單用的是 rc-form，V4 版本換成了 rc-field-form。

參考 antd 源碼和 rc-field-form。

 

-----------------------------------------------------------

 

因項目需要封裝的組件，組件庫使用的是Ant Design

📙 項目地址 :

     👉 Github地址(React Multi-level Form)：https://github.com/zlinggnilz/react-multi-level-form 

     👉 在線示例：https://codesandbox.io/s/clever-montalcini-litjo

📋 說明 :

用到了 Form組件 , 布局組件，表單控件 ，如果沒有使用Ant Design，可以用rc-form代替，需要對組件中使用的表單控件和布局進行替換。

example示例待完善，參數可參考組件中的proptypes 

 

🛎️ 注意 :

如果表單很大比較復雜，目前的使用方式，因為是onChange的時候觸發表單收集數據，導致頻繁render，導致填寫表單時候會有些卡。

解決方式 :  此組件中未做處理，根據需要自行處理。我在項目中目前使用的方式是，對input, textarea, inputNumber 輸入類型的控件做onBlur的時候觸發表單數據收集。其他控件和自定義控件還是由onChange觸發。小的表單可以不用考慮，還用onChange的方式。

 

📖 使用 :

需要formAttr表述層級結構，data為表單原始值，默認為 { }，表單最終提交的是對應層級結構的Object，如：

formAttr:

const formAttr = [
  {
    label: '游樂園',
    key: 'park',
    multi: true,
    children: [
      { label: '名稱', key: 'name' },
      { label: '地點', key: 'location', required: false },
      { label: '評分', key: 'rate', type: 'int', required: false }
    ]
  }
];

js:

<MultiForm formAttr={formAttr} data={{}} onSubmit={this.handleSubmit} loading={loading} />

頁面顯示:

Submit Data:

{
  "park": [
    {
      "name": "名稱1",
      "location": "地址1",
      "rate": 4
    },
    {
      "name": "名稱2",
      "location": "地點2",
      "rate": 5
    }
  ]
}

 

📚 參考 :

• Ant-design官網的示例：動態增減表單項 https://ant.design/components/form-cn/#components-form-demo-dynamic-form-item
• rc-form http://react-component.github.io/form/