国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Ant design pro 開發(fā)筆記 - 表單和數(shù)據(jù)綁定

zsy888 / 1273人閱讀

摘要：支持表單雙向綁定，開發(fā)過程中無需通過回調(diào)函數(shù)去獲取組件的值，通過可以自動完成數(shù)據(jù)綁定的功能。如果我們通過獲取了數(shù)據(jù)之后，表單數(shù)據(jù)不會發(fā)生變化。注意使用這個函數(shù)必須用封裝需要綁定的字段。

antd支持表單雙向綁定，開發(fā)過程中無需通過onChange()回調(diào)函數(shù)去獲取組件的值，通過 getFieldDecorator() 可以自動完成數(shù)據(jù)綁定的功能。

{
    getFieldDecorator("email", {})()
}

第二個參數(shù)是options，不同的配置可以完成更多的任務(wù)，例如必填數(shù)據(jù)驗證

{
    let opt = { rules: [ { required: true, message: "the field must supply." } ] }
    getFieldDecorator("email", opt)()
}

也可以完成更多業(yè)務(wù)邏輯數(shù)據(jù)驗證，例如：

{
    let opt = { rules: [ { type: "email", message: "It"s invalid email address." } ] }
    getFieldDecorator("email", opt)()
}

還可以指定一個初始值：

{
    let opt = { initialValue: "hello@mail.com" }
    getFieldDecorator("email", opt)()
}
注意：通過initialValue指定的初始值，只在第一次render()中起作用。如果我們通過API獲取了數(shù)據(jù)之后，表單數(shù)據(jù)不會發(fā)生變化。
這個時候就要用到mapPropsToFields()來為字段綁定數(shù)據(jù)。
{
    function mapModelToProps(model) {
      return {
        item: model.requirement.item,
        loading: model.loading.effects["requirement/fetch"]
      };
    }
    function mapPropsToFields(props) {
      return {
        description: Form.createFormField({
          value: props.item.description
        })
      }
    }
    export default connect(mapModelToProps)(Form.create({mapPropsToFields})(Edit));
}

這里有兩個函數(shù)來map所需要的數(shù)據(jù)：

mapModelToProps()將state中所需要的數(shù)據(jù)映射到props上。

mapPropsToFields()則將props中的數(shù)據(jù)映射到表單字段上，并更新字段的value值。注意使用這個函數(shù)必須用Form.createFormField()封裝需要綁定的字段。

Ant design使用的表單組件是rc-form
使用的驗證組件是async-validator

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/95254.html

相關(guān)文章

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

    摘要：擅長網(wǎng)站建設(shè)微信公眾號開發(fā)微信小程序開發(fā)小游戲制作企業(yè)微信制作建設(shè)，專注于前端框架服務(wù)端渲染技術(shù)交互設(shè)計圖像繪制數(shù)據(jù)分析等研究。 Ant Design of React @3.10.9 拉取項目 luwei.web.study-ant-design-pro, 切換至 query 分支，可看到 Form 表單實現(xiàn)效果 實現(xiàn)一個查詢表單 showImg(https://segmentfau...

    trilever 評論0 收藏0

  • wangEditor 與 阿里的[pro ant design]的組合搭配

    摘要：網(wǎng)上已經(jīng)有一篇類似的文章富文本編輯器的使用當(dāng)然我也參考了他的寫法然后實現(xiàn)了我到需求現(xiàn)在拿出來分享分享版本我們用編輯器大部分情況是在表單中使用而的表單系統(tǒng)一般也離不了安裝很簡單注意全是小寫和綁定一些屬性設(shè)置這段代碼會劃紅線理由是沒有返回值本人 網(wǎng)上已經(jīng)有一篇類似的文章wangEditor富文本編輯器+react+antd的使用, 當(dāng)然我也參考了他的寫法, 然后實現(xiàn)了我到需求, 現(xiàn)在拿出來...

    masturbator 評論0 收藏0

  • Ant Design Pro 的 Docker 部署方式

    摘要：在使用的過程中，可以發(fā)現(xiàn)它提供了一系列基于的開發(fā)部署方式，如下圖。我們可以通過分別啟動單個鏡像，并把鏡像綁定到本地對應(yīng)端口的形式進行部署，達到容器可通信的目的。但是為了更方便的管理多容器的情況，官方提供了的方式。 背景 Ant Design Pro是一個企業(yè)級中后臺解決方案，在Ant Design組件庫的基礎(chǔ)上，提煉出典型模板/業(yè)務(wù)組件/通用頁等，在此基礎(chǔ)上能夠使開發(fā)者快速的完成中后臺...

    wemallshop 評論0 收藏0

  • Ant Design Pro - 實踐React Hooks - 頁面

    摘要：背景目前是社區(qū)最炙手可熱的新技術(shù)，我們準(zhǔn)備追一下熱度，在當(dāng)前的項目中實踐一下技術(shù)。我們的項目使用的腳手架是，初步想法是把現(xiàn)有的一個有狀態(tài)頁面組件重構(gòu)成函數(shù)組件。存放表單值的狀態(tài)是聲明在列表組件，傳給表單組件。 背景 React Hooks目前是React社區(qū)最炙手可熱的新技術(shù)，我們準(zhǔn)備追一下熱度，在當(dāng)前的項目中實踐一下Hooks技術(shù)。 我們的項目使用的腳手架是Ant Design P...

    wangbjun 評論0 收藏0

  • 安裝項目依賴包---基于Ant-Design-Pro-2-0-的CMS管理后臺入門系列

    摘要：安裝項目依賴包根據(jù)自身習(xí)慣的方式，自行選擇使用或進行安裝依賴包。安裝完成會顯示部分警報，暫時忽略。如果安裝最后顯示錯誤，請自行搜索查詢錯誤信息。 安裝項目依賴包 根據(jù)自身習(xí)慣的方式，自行選擇使用 npm 或 yarn 進行安裝依賴包。 注意：如果選擇 npm 安裝，后面的命令都是用 npm 命令，包括 npm start / npm build 等；選擇 yarn 安裝同樣如此。請勿將...

    wemallshop 評論0 收藏0

發(fā)表評論

0條評論

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