Ant Design 組件 —— Form表單（二）

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

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

校驗規則請參考Ant Design - Form 校驗規則

5. 設置一組輸入控件的值 setFieldsValue

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疊方塊直播競賽小遊戲。擅長網站建設、公衆號開發、微信小程序開發、小遊戲、公衆號開發，專一於前端框架、服務端渲染、SEO技術、交互設計、圖像繪製、數據分析等研究。

  歡迎和咱們一塊兒並肩做戰： web@talkmoney.cn 訪問 www.talkmoney.cn 瞭解更多