資訊專欄INFORMATION COLUMN
摘要：支持表單雙向綁定，開發過程中無需通過回調函數去獲取組件的值，通過可以自動完成數據綁定的功能。如果我們通過獲取了數據之后，表單數據不會發生變化。注意使用這個函數必須用封裝需要綁定的字段。
antd支持表單雙向綁定，開發過程中無需通過onChange()回調函數去獲取組件的值，通過 getFieldDecorator() 可以自動完成數據綁定的功能。
{
getFieldDecorator("email", {})()
}
第二個參數是options，不同的配置可以完成更多的任務，例如必填數據驗證
{
let opt = { rules: [ { required: true, message: "the field must supply." } ] }
getFieldDecorator("email", opt)()
}
也可以完成更多業務邏輯數據驗證，例如：
{
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獲取了數據之后，表單數據不會發生變化。
這個時候就要用到mapPropsToFields()來為字段綁定數據。
{
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));
}
這里有兩個函數來map所需要的數據：
mapModelToProps()將state中所需要的數據映射到props上。
mapPropsToFields()則將props中的數據映射到表單字段上，并更新字段的value值。注意使用這個函數必須用Form.createFormField()封裝需要綁定的字段。
Ant design使用的表單組件是rc-form
使用的驗證組件是async-validator
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95254.html
摘要：擅長網站建設微信公眾號開發微信小程序開發小游戲制作企業微信制作建設，專注于前端框架服務端渲染技術交互設計圖像繪制數據分析等研究。 Ant Design of React @3.10.9 拉取項目 luwei.web.study-ant-design-pro, 切換至 query 分支，可看到 Form 表單實現效果 實現一個查詢表單 showImg(https://segmentfau...
摘要：網上已經有一篇類似的文章富文本編輯器的使用當然我也參考了他的寫法然后實現了我到需求現在拿出來分享分享版本我們用編輯器大部分情況是在表單中使用而的表單系統一般也離不了安裝很簡單注意全是小寫和綁定一些屬性設置這段代碼會劃紅線理由是沒有返回值本人 網上已經有一篇類似的文章wangEditor富文本編輯器+react+antd的使用, 當然我也參考了他的寫法, 然后實現了我到需求, 現在拿出來...
摘要：在使用的過程中，可以發現它提供了一系列基于的開發部署方式，如下圖。我們可以通過分別啟動單個鏡像，并把鏡像綁定到本地對應端口的形式進行部署，達到容器可通信的目的。但是為了更方便的管理多容器的情況，官方提供了的方式。 背景 Ant Design Pro是一個企業級中后臺解決方案，在Ant Design組件庫的基礎上，提煉出典型模板/業務組件/通用頁等，在此基礎上能夠使開發者快速的完成中后臺...
摘要：背景目前是社區最炙手可熱的新技術，我們準備追一下熱度，在當前的項目中實踐一下技術。我們的項目使用的腳手架是，初步想法是把現有的一個有狀態頁面組件重構成函數組件。存放表單值的狀態是聲明在列表組件，傳給表單組件。 背景 React Hooks目前是React社區最炙手可熱的新技術，我們準備追一下熱度，在當前的項目中實踐一下Hooks技術。 我們的項目使用的腳手架是Ant Design P...
摘要：安裝項目依賴包根據自身習慣的方式，自行選擇使用或進行安裝依賴包。安裝完成會顯示部分警報，暫時忽略。如果安裝最后顯示錯誤，請自行搜索查詢錯誤信息。 安裝項目依賴包 根據自身習慣的方式，自行選擇使用 npm 或 yarn 進行安裝依賴包。 注意：如果選擇 npm 安裝，后面的命令都是用 npm 命令，包括 npm start / npm build 等；選擇 yarn 安裝同樣如此。請勿將...
閱讀 1887·2021-11-15 11:46
閱讀 1077·2021-10-26 09:49
閱讀 1820·2021-10-14 09:42
閱讀 3374·2021-09-26 09:55
閱讀 827·2019-08-30 13:58
閱讀 1024·2019-08-29 16:40
閱讀 3462·2019-08-26 10:27
閱讀 601·2019-08-23 18:18
