Ant Design of React @3.10.9

拉取專案 luwei.web.study-ant-design-pro, 切換至 add 分支，可看到 Form 表單實現效果

實現一個新增表單

思路

1. Create表單：@Form.create()
2. 表單資料繫結 getFieldDecorator
3. 渲染查詢表單的查詢條件 render <Form.Item>
4. 定義表單校驗條件 rules
5. 設定一組輸入控制元件的值 setFieldsValue
6. 獲取查詢條件的值 validateFields

區別於[Form表單(一)]()，新增了 表單校驗條件

和 設定控制元件值 兩點。

程式碼

1. Create表單：@Form.create()

Form.create()

這是一個高階函式，傳入的是react元件，返回一個新的react元件，在函式內部會對傳入元件進行改造，新增上一定的方法用於進行一些祕密操作 如果有對高階元件有想要深入的請移步《深入理解 React 高階元件》，我們這裡不做過多的深究。

經 Form.create() 包裝過的元件會自帶 this.props.form 屬性

// 使用方式如下：
class CustomizedForm extends React.Component {}
CustomizedForm = Form.create({})(CustomizedForm);
 

程式碼中結合 @ 的修飾器，用 @Form.create() 進行建立。

2. 表單資料繫結 getFieldDecorator

getFieldDecorator(id, options)

用於和表單進行雙向繫結

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

3. 渲染查詢表單的查詢條件 render <Form.Item>

在定義表單欄位的時候，渲染到頁面中，與步驟2程式碼一致

更多FormItem屬性請參考Ant Design - Form - Form.Item

4. 定義表單校驗條件 rules

```javascript?linenums
<Form.Item {...formItemLayout} label="名稱">
{getFieldDecorator('name', {
rules: [
{
required: true,
message: '必填',
},
],
initialValue: this.state.name,
})(<Input placeholder="請輸入名稱" maxLength={25} />)}

> 校驗規則請參考[Ant Design - Form 校驗規則](https://ant.design/components/form-cn/#%E6%A0%A1%E9%AA%8C%E8%A7%84%E5%88%99)

### 5. 設定一組輸入控制元件的值 setFieldsValue

```javascript
this.props.form.setFieldsValue({
  name: `hello world`,
});

使用場景：

1. 新增資訊，將每個欄位置空
2. 更新資訊，將原有的資料設定在相對的表單控制元件中。

setFieldsValue

動態設定/控制表單中控制元件的值

注意

1. 使用 getFieldsValue getFieldValue setFieldsValue 等時，應確保對應的 field 已經用 getFieldDecorator 註冊過了。
2. 設定一組輸入控制元件的值（注意：不要在 componentWillReceiveProps 內使用，否則會導致死迴圈

6. 獲取查詢條件的值 validateFields

form.validateFields / validateFieldsAndScroll

校驗並獲取一組輸入域的值與 Error，若 fieldNames 引數為空，則校驗全部元件

const { form } = this.props;

// 獲取並檢查表單資料
form.validateFields((err, fieldsValue) => {
    if (err) return;
    const { searchName = '' } = fieldsValue;
});

深入瞭解

• Ant Design Form表單
• rc-form
• antd原始碼解讀（9）- Form

作者簡介：李堯暉，蘆葦科技web前端開發工程師，代表作品：飛花亭小程式、續航基因、YY表情紅包、YY疊方塊直播競賽小遊戲。擅長網站建設、微信公眾號開發、微信小程式開發、小遊戲製作、企業微信製作、H5建設，專注於前端框架、服務端渲染、SEO技術、互動設計、影象繪製、資料分析等研究。

歡迎和我們一起並肩作戰： [email protected]
訪問 www.talkmoney.cn 瞭解更多

提供深圳微信公眾號製作，高質量的釘釘外包，廣東企業微信建設，東莞微信小程式製作，專業的小遊戲開發，廣州H5建設