Ant Design of React @3.10.9
拉取項目 luwei.web.study-ant-design-pro, 切換至
add
分支,可看到 Form 表單實現效果
實現一個新增表單
思路
- Create表單:
@Form.create()
- 表單數據綁定
getFieldDecorator
- 渲染查詢表單的查詢條件
render <Form.Item>
- 定義表單校驗條件 rules
- 設置一組輸入控件的值
setFieldsValue
- 獲取查詢條件的值
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`,
});
使用場景:
- 新增信息,將每個字段置空
- 更新信息,將原有的數據設置在相對的表單控件中。
setFieldsValue
動態設置/控制表單中控件的值
注意
- 使用
getFieldsValue
getFieldValue
setFieldsValue
等時,應確保對應的 field 已經用getFieldDecorator
註冊過了。- 設置一組輸入控件的值(注意:不要在
componentWillReceiveProps
內使用,否則會導致死循環
6. 獲取查詢條件的值 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技術、交互設計、圖像繪製、數據分析等研究。
歡迎和我們一起並肩作戰: [email protected]
訪問 www.talkmoney.cn 瞭解更多
提供深圳微信公衆號製作,高質量的釘釘外包,廣東企業微信建設,東莞微信小程序製作,專業的小遊戲開發,廣州H5建設