Ant Design of React @3.10.9
拉取項(xiàng)目 luwei.web.study-ant-design-pro, 切換至
add分支卓囚，可看到 Form 表單實(shí)現(xiàn)效果
實(shí)現(xiàn)一個(gè)新增表單
思路
- Create表單：
@Form.create() - 表單數(shù)據(jù)綁定
getFieldDecorator - 渲染查詢表單的查詢條件
render <Form.Item> - 定義表單校驗(yàn)條件 rules
- 設(shè)置一組輸入控件的值
setFieldsValue - 獲取查詢條件的值
validateFields
區(qū)別于Form表單(一)箩朴，新增了
表單校驗(yàn)條件和設(shè)置控件值兩點(diǎn)低斋。
代碼
1. Create表單：@Form.create()
Form.create()
這是一個(gè)高階函數(shù)谜叹，傳入的是react組件痪枫，返回一個(gè)新的react組件，在函數(shù)內(nèi)部會(huì)對(duì)傳入組件進(jìn)行改造颓遏，添加上一定的方法用于進(jìn)行一些秘密操作 如果有對(duì)高階組件有想要深入的請(qǐng)移步《深入理解 React 高階組件》孵坚，我們這里不做過多的深究粮宛。
經(jīng) Form.create() 包裝過的組件會(huì)自帶 this.props.form 屬性
// 使用方式如下：
class CustomizedForm extends React.Component {}
CustomizedForm = Form.create({})(CustomizedForm);
代碼中結(jié)合 @ 的修飾器貌踏，用 @Form.create() 進(jìn)行創(chuàng)建。
2. 表單數(shù)據(jù)綁定 getFieldDecorator
getFieldDecorator(id, options)
用于和表單進(jìn)行雙向綁定
<!-- 表單數(shù)據(jù)綁定 -->
<Form.Item {...formItemLayout} label={'名稱'}>
{getFieldDecorator('searchName')(
<Input placeholder={'請(qǐng)輸入名稱'} />
)}
</Form.Item>
3. 渲染查詢表單的查詢條件 render <Form.Item>
在定義表單字段的時(shí)候窟勃，渲染到頁面中，與步驟2代碼一致
更多FormItem屬性請(qǐng)參考Ant Design - Form - Form.Item
4. 定義表單校驗(yàn)條件 rules
<Form.Item {...formItemLayout} label="名稱">
{getFieldDecorator('name', {
rules: [
{
required: true,
message: '必填',
},
],
initialValue: this.state.name,
})(<Input placeholder="請(qǐng)輸入名稱" maxLength={25} />)}
校驗(yàn)規(guī)則請(qǐng)參考Ant Design - Form 校驗(yàn)規(guī)則
5. 設(shè)置一組輸入控件的值 setFieldsValue
this.props.form.setFieldsValue({
name: `hello world`,
});
使用場(chǎng)景：
- 新增信息逗堵，將每個(gè)字段置空
- 更新信息秉氧，將原有的數(shù)據(jù)設(shè)置在相對(duì)的表單控件中。
setFieldsValue
動(dòng)態(tài)設(shè)置/控制表單中控件的值
注意
- 使用
getFieldsValuegetFieldValuesetFieldsValue等時(shí)蜒秤，應(yīng)確保對(duì)應(yīng)的 field 已經(jīng)用getFieldDecorator注冊(cè)過了汁咏。- 設(shè)置一組輸入控件的值（注意：不要在
componentWillReceiveProps內(nèi)使用，否則會(huì)導(dǎo)致死循環(huán)
6. 獲取查詢條件的值 validateFields
form.validateFields / validateFieldsAndScroll
校驗(yàn)并獲取一組輸入域的值與 Error作媚，若 fieldNames 參數(shù)為空攘滩，則校驗(yàn)全部組件
const { form } = this.props;
// 獲取并檢查表單數(shù)據(jù)
form.validateFields((err, fieldsValue) => {
if (err) return;
const { searchName = '' } = fieldsValue;
});
深入了解
作者簡(jiǎn)介：李堯暉，蘆葦科技web前端開發(fā)工程師纸泡，代表作品：飛花亭小程序漂问、續(xù)航基因、YY表情紅包女揭、YY疊方塊直播競(jìng)賽小游戲蚤假。擅長(zhǎng)網(wǎng)站建設(shè)、微信公眾號(hào)開發(fā)吧兔、微信小程序開發(fā)磷仰、小游戲制作、企業(yè)微信制作境蔼、H5建設(shè)灶平，專注于前端框架、服務(wù)端渲染箍土、SEO技術(shù)逢享、交互設(shè)計(jì)、圖像繪制涮帘、數(shù)據(jù)分析等研究拼苍。
歡迎和我們一起并肩作戰(zhàn)： web@talkmoney.cn
訪問 www.talkmoney.cn 了解更多
提供深圳微信公眾號(hào)制作，高質(zhì)量的釘釘外包调缨，廣東企業(yè)微信建設(shè)疮鲫，東莞微信小程序制作，專業(yè)的小游戲開發(fā)弦叶，廣州H5建設(shè)
