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

trilever 發布于2019-08-23 14:28 / 1634人閱讀

摘要：擅長網站建設微信公眾號開發微信小程序開發小游戲制作企業微信制作建設，專注于前端框架服務端渲染技術交互設計圖像繪制數據分析等研究。

Ant Design of React @3.10.9

拉取項目 luwei.web.study-ant-design-pro, 切換至 query 分支，可看到 Form 表單實現效果

實現一個查詢表單

思路

Create表單：@Form.create()

表單數據綁定 getFieldDecorator

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

獲取查詢條件的值 validateFields

代碼 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)

用于和表單進行雙向綁定



    {getFieldDecorator("searchName")(
        
    )}

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

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

更多FormItem屬性請參考Ant Design - Form - Form.Item

4. 獲取查詢條件的值 validateFields form.validateFields / validateFieldsAndScroll

校驗并獲取一組輸入域的值與 Error，若 fieldNames 參數為空，則校驗全部組件

const { form } = this.props;

// 獲取并檢查表單數據
form.validateFields((err, fieldsValue) => {
      if (err) return;
      const { searchName = "" } = fieldsValue;
});

深入了解

Ant Design Form表單

rc-form

antd源碼解讀（9）- Form

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

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

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

GPU云服務器云服務器 form表單校驗 form表單插件 form表單判斷 form表單提交

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100656.html

JSON生成Form表單（三）

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

Half 2019-08-23 13:39 評論0 收藏0
JSON生成Form表單

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

bingchen 2019-08-26 13:22 評論0 收藏0
react 前端項目技術選型、開發工具、周邊生態

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

hersion 2019-08-30 15:54 評論0 收藏0
react 前端項目技術選型、開發工具、周邊生態

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

kidsamong 2019-08-23 14:07 評論0 收藏0