Ant Design of React @3.10.9

拉取項(xiàng)目 luwei.web.study-ant-design-pro, 切換至 add 分支，可看到 Form 表單實(shí)現(xiàn)效果

實(shí)現(xiàn)一個(gè)新增表單

新增表單

思路

1. Create表單：@Form.create()
2. 表單數(shù)據(jù)綁定 getFieldDecorator
3. 渲染查詢表單的查詢條件 render <Form.Item>
4. 定義表單校驗(yàn)條件 rules
5. 設(shè)置一組輸入控件的值 setFieldsValue
6. 獲取查詢條件的值 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 高階組件》，我們這里不做過(guò)多的深究。

經(jīng) Form.create() 包裝過(guò)的組件會(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í)候，渲染到頁(yè)面中，與步驟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)景：

1. 新增信息，將每個(gè)字段置空
2. 更新信息，將原有的數(shù)據(jù)設(shè)置在相對(duì)的表單控件中。

setFieldsValue

動(dòng)態(tài)設(shè)置/控制表單中控件的值

注意

1. 使用 getFieldsValue getFieldValue setFieldsValue 等時(shí)，應(yīng)確保對(duì)應(yīng)的 field 已經(jīng)用 getFieldDecorator 注冊(cè)過(guò)了。
2. 設(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;
});

深入了解

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

作者簡(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
訪問(wèn) www.talkmoney.cn 了解更多

提供深圳微信公眾號(hào)制作，高質(zhì)量的釘釘外包，廣東企業(yè)微信建設(shè)，東莞微信小程序制作，專業(yè)的小游戲開發(fā)，廣州H5建設(shè)