Ant Design of React @3.10.9
拉取項目 luwei.web.study-ant-design-pro, 切換至
query分支，可看到 Form 表單實現效果
實現一個查詢表單
查詢表單
思路
- Create表單：
@Form.create() - 表單數據綁定
getFieldDecorator - 渲染查詢表單的查詢條件
render - 獲取查詢條件的值
validateFields
代碼
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 `
在定義表單字段的時候，渲染到頁面中，與步驟2代碼一致
更多FormItem屬性請參考Ant Design - Form - Form.Item
4. 獲取查詢條件的值 `validateFields`
form.validateFields / validateFieldsAndScroll
校驗並獲取一組輸入域的值與 Error，若 fieldNames 參數為空，則校驗全部組件
const { form } = this.props;
// 獲取並檢查表單數據
form.validateFields((err, fieldsValue) => {
if (err) return;
const { searchName = '' } = fieldsValue;
});
深入了解
作者簡介：李堯暉，蘆葦科技web前端開發工程師，代表作品：飛花亭小程序、續航基因、YY表情紅包、YY疊方塊直播競賽小游戲。擅長網站建設、微信公眾號開發、微信小程序開發、小游戲制作、企業微信制作、H5建設，專注於前端框架、服務端渲染、SEO技術、交互設計、圖像繪制、數據分析等研究。
歡迎和我們一起並肩作戰： web@talkmoney.cn
訪問 www.talkmoney.cn 了解更多
提供深圳微信公眾號制作，高質量的釘釘外包，廣東企業微信建設，東莞微信小程序制作，專業的小游戲開發，廣州H5建設