亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

trilever / 1734人閱讀

摘要：擅長網(wǎng)站建設(shè)微信公眾號開發(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)部會對傳入組件進(jìn)行改造，添加上一定的方法用于進(jìn)行一些秘密操作 如果有對高階組件有想要深入的請移步《深入理解 React 高階組件》，我們這里不做過多的深究。

經(jīng) Form.create() 包裝過的組件會自帶 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í)候，渲染到頁面中，與步驟2代碼一致

更多FormItem屬性請參考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

作者簡介：李堯暉，蘆葦科技web前端開發(fā)工程師，代表作品：飛花亭小程序、續(xù)航基因、YY表情紅包、YY疊方塊直播競賽小游戲。擅長網(wǎng)站建設(shè)、微信公眾號開發(fā)、微信小程序開發(fā)、小游戲制作、企業(yè)微信制作、H5建設(shè)，專注于前端框架、服務(wù)端渲染、SEO技術(shù)、交互設(shè)計(jì)、圖像繪制、數(shù)據(jù)分析等研究。

歡迎和我們一起并肩作戰(zhàn)： web@talkmoney.cn
訪問 www.talkmoney.cn 了解更多

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/100656.html

相關(guān)文章

  • JSON生成Form表單（三）

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

    Half 評論0 收藏0

  • JSON生成Form表單

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

    bingchen 評論0 收藏0

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

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

    hersion 評論0 收藏0

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

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

    kidsamong 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<