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/