成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Ant-Design-組件-——-Form表單（一）

trilever / 1654人閱讀

摘要：擅長(zhǎng)網(wǎng)站建設(shè)微信公眾號(hào)開發(fā)微信小程序開發(fā)小游戲制作企業(yè)微信制作建設(shè)，專注于前端框架服務(wù)端渲染技術(shù)交互設(shè)計(jì)圖像繪制數(shù)據(jù)分析等研究。

Ant Design of React @3.10.9
拉取項(xiàng)目 luwei.web.study-ant-design-pro, 切換至 query 分支，可看到 Form 表單實(shí)現(xiàn)效果
實(shí)現(xiàn)一個(gè)查詢表單

思路

Create表單：@Form.create()

表單數(shù)據(jù)綁定 getFieldDecorator

渲染查詢表單的查詢條件 render

獲取查詢條件的值 validateFields

代碼 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)行雙向綁定



    {getFieldDecorator("searchName")(
        
    )}
3. 渲染查詢表單的查詢條件 render

在定義表單字段的時(shí)候，渲染到頁(yè)面中，與步驟2代碼一致

更多FormItem屬性請(qǐng)參考Ant Design - Form - Form.Item
4. 獲取查詢條件的值 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)： [email protected]
訪問(wèn) www.talkmoney.cn 了解更多

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/100656.html

相關(guān)文章

  • JSON生成Form表單（三）

    摘要：嵌套組件配置如果表單組件里還含有其他表單組件，這時(shí)直接通過(guò)組件配置去渲染無(wú)疑能節(jié)約不少的工作量。請(qǐng)輸入方法傳入組件配置的列表就能渲染出表單組件來(lái)，需要注意的是，子表單組件的一定是基于父表單組件的。表單的實(shí)例方法請(qǐng)看下節(jié)的生成表單四 container表單組件 在實(shí)際的項(xiàng)目中，JSON表單提供的表單組件是遠(yuǎn)遠(yuǎn)不夠的，而且提供表單組件是一件低效的事，目前Ant Design組件庫(kù)提供的表單...

    Half 評(píng)論0 收藏0

  • JSON生成Form表單

    摘要：是校驗(yàn)表單組件數(shù)據(jù)正確性的字段，其值為數(shù)組，里面的數(shù)組元素可以為。所以數(shù)組元素如果為的話，其內(nèi)容就是的。到目前為止，表單適合大部分的表單應(yīng)用場(chǎng)景。 JSON表單 描述 JSON表單是一個(gè)基于React的抽象組件，它可以把JSON數(shù)據(jù)格式描述的表單轉(zhuǎn)換成項(xiàng)目中的表單，它可以用簡(jiǎn)短的幾行代碼，快速的生成Form表單。JSON表單的優(yōu)點(diǎn)是： 可以快速構(gòu)建出一個(gè)表單 表單的數(shù)據(jù)、邏輯、視圖分...

    bingchen 評(píng)論0 收藏0

  • react 前端項(xiàng)目技術(shù)選型、開發(fā)工具、周邊生態(tài)

    摘要：更多參考通過(guò)庫(kù)掌握函數(shù)組件有些時(shí)候，我們想要?jiǎng)討B(tài)的加載一些組件按需加載，比如在一個(gè)單頁(yè)面應(yīng)用中頁(yè)面的組件頁(yè)面的組件頁(yè)面的組件只有真正要實(shí)例化當(dāng)前頁(yè)面的時(shí)候，才會(huì)去加載相應(yīng)的組件。 react 前端項(xiàng)目技術(shù)選型、開發(fā)工具、周邊生態(tài) 聲明：這不是一篇介紹 React 基礎(chǔ)知識(shí)的文章，需要熟悉 React 相關(guān)知識(shí) 主架構(gòu)：react, react-router, redux, redux...

    hersion 評(píng)論0 收藏0

  • react 前端項(xiàng)目技術(shù)選型、開發(fā)工具、周邊生態(tài)

    摘要：更多參考通過(guò)庫(kù)掌握函數(shù)組件有些時(shí)候，我們想要?jiǎng)討B(tài)的加載一些組件按需加載，比如在一個(gè)單頁(yè)面應(yīng)用中頁(yè)面的組件頁(yè)面的組件頁(yè)面的組件只有真正要實(shí)例化當(dāng)前頁(yè)面的時(shí)候，才會(huì)去加載相應(yīng)的組件。 react 前端項(xiàng)目技術(shù)選型、開發(fā)工具、周邊生態(tài) 聲明：這不是一篇介紹 React 基礎(chǔ)知識(shí)的文章，需要熟悉 React 相關(guān)知識(shí) 主架構(gòu)：react, react-router, redux, redux...

    kidsamong 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<