ant design Form 元件總結 快速建構複雜Ant Design Form表單

Ant Design Form

Antd 表單的核心無非是以下兩點

1. 表單建立（

   Form.create

   ）在

   this.props

   寫入

   form

   屬性
2. 表單與元件的雙向綁定（

   this.props.form.getFieldDecorator

   ）
3. 表單的取值（

   this.props.form.validateFields / this.props.form.validateFieldsAndScroll

   ）

表單建立

Form.create

這是一個高階函數，傳入的是react元件，傳回一個新的react元件，在函數内部會對傳入元件進行改造，添加上一定的方法用于進行一些秘密操作 ，這裡不多做解釋，有興趣的同學可以上官網檢視。

我是飛機票（React-高階元件），點我

使用方法如下：

class CustomizedForm extends React.Component { ... }

// use wrappedComponentRef
const EnhancedForm =  Form.create()(CustomizedForm);
           

或者

@Form.create()
class CustomizedForm extends React.Component { ... }
           

表單與元件的雙向綁定

他的目的是将表單的元件的值與表單綁定。最後表單可以直接取到某某元件的值。

<!-- 表單資料綁定 -->
<Form.Item {...formItemLayout} label={'名稱'}>
	{getFieldDecorator('searchName')(
		<Input placeholder={'請輸入名稱'} />
	)}
</Form.Item>
           

這個是一個非常簡單的綁定，元件input的值都會由’searchName’這個屬性收納。

可以直接取值，當然也可以加入自己的校驗規則，等等。這裡不多做解釋，這些都是附加的進階功能，這裡不多做描述。

我是飛機票（表單進階），點我！

表單的取值

this.props.form.validateFields((err, values) => {
      if (!err) { // 這裡也可以不要，是用于校驗的。
        console.log('Received values of form: ', values);
      }
    });
           

這是一個非常簡單的取值，當然可以定制的取值，或者定制的校驗，比如，在擷取驗證碼的時候，不需要校驗密碼是否輸入或者符合你的規則，就可以隻校驗手機号，等等。這裡不多做解釋，這些都是附加的進階功能，這裡不多做描述。

我是飛機票（表單進階），點我！

基本上你掌握了這些就可以較為靈活的使用Ant Design Form了。

但是！劃重點了！

如果有一些更加進階的想法。請看！

表單的進階使用

重中之重

如果你覺得自己建構表單非常麻煩，或者對表單的了解還是夠透徹，想一步到位構件表單，推薦本人自用自創元件

ant-design-form

上面的文檔非常詳細，如果有問題随時可以給我提issues。如果喜歡的話麻煩點個start~

我是ant-design-from的飛機票，點我點我！！