Ant Design 4.0更新指南（2）——Form

antd 原有的 Form 組件其實已經足夠好用了，但是這次 4.0 對 Form 的更新開始注重不止要好用，還要“優雅”。“優雅”這個東西一直都很玄學。

antd 的 Form 一直以來都很特例獨行，區別於其它 antd 組件，Form 的調用並不只是簡單的引入組件即可，而是先要進行 Form.create()創建一個 Form 實例，使用 FormItem 時還需在 jsx 中調用 form.getFieldDecorator 方法，寫法較爲複雜，況且在 jsx 中插入大量的非節點代碼，造成代碼結構複雜，且一般情況下，一個 Form 表單會有多個 FormItem，也就意味着我們需要重複的去調用 form.getFieldDecorator 方法，導致後期維護成本很高。寫這種重複且簡單的無意義的代碼，這和開篇所說的“優雅”背道而馳。

爲了解決這些問題，這次 antd 團隊從底層重寫了 Form。首先，去掉了 Form.create()這一步操作，改爲直接在組件內部去完成。另外將原來的 FormItem 的調用方式也進行了優化，下面是老版本的 FormItem 的調用示例：

<FormItem {...formItemLayout} label="姓名">
  {form.getFieldDecorator("name", {
    rules: [
      {
        required: true,
        message: "姓名不能爲空",
      },
    ],
    initialValue: data.name,
  })(<Input placeholder="請輸入姓名" />)}
</FormItem>

可以看到，老版本實際上是在組件的 jsx 中調用了 form.getFieldDecorator 方法，本質上是一個高階組件，然後再將 FormItem 的組件作爲參數傳入，先不說這種方式複雜與否。如果這個表單有多個 FormItem，這段代碼將變得異常混亂。而在 antd 4.0 中，官方也意識到了這個問題，下面是一個新版本 Form 的調用示例：

<Form
  layout="vertical"
  initialValues={{
    name: data.name,
  }}
  onFinish={this.onSubmit}
>
  <Form.Item
    label="姓名"
    name="name"
    rules={[
      {
        required: true,
        message: "姓名不能爲空",
      },
    ]}
  >
    <Input placeholder="請輸入姓名" />
  </Form.Item>
</Form>

可以看到，FormItem 的調用方式更加純粹了，更像是一個組件的調用，無需再寫冗雜的函數調用代碼，這樣即使是數據了也能保證代碼整潔，降低後期維護成本。表單輸入完成後，直接使用 Form 的 onFinish 方法，便可以拿到驗證通過之後的數據。棄用了之前的先調用 form.validateFields，然後判斷是否驗證通過，然後再通過回調拿到驗證通過之後的值。又向更加便捷邁進了一步。

同時本次也引入了 ref 句柄，可以通過 ref 來主動調用 validateFields 事件，比如說像這樣子：

this.formRef.current
  .validateFields()
  .then((values) => {
    // do somethings
  })
  .catch((errors) => {
    // do somethings
  });

看着這長長的一行代碼，你想到了什麼？對！就是 jQuery。這種寫法真的太像 jQuery 的鏈式調用啦~讓我有一種回到了 DOM 操作的時代，這種方式十分容易理解：先通過 ref 句柄拿到 Form 實例，然後調用它的 validateFields 方法，然後如果校驗通過做什麼，校驗失敗又要做什麼，十分的語義化，一目瞭然，代碼邏輯一下子就明白了。

最後，官方說了，後期可能會推出跟 ProTable 類似的 ProForm，將基礎表單直接封裝起來，常用的基礎表單直接配置數據即可使用，後期修改也只用維護這份配置數據，做到真正的數據驅動。期待中…

最後說一句，antd 大法好，儘早上車保平安~