antd Form組件方法getFieldsValue獲取自定義組件的值操作
更新時間：2020年10月29日 14:46:10 作者：多芒小丸子
這篇文章主要介紹了antd Form組件方法getFieldsValue獲取自定義組件的值操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
自定義組件
1、自定義組件被getFieldsValue包裹，會獲得以下屬性
onChange方法, 子組件調(diào)用此方法，可將值傳給父組件，從而Form可拿到自定義組件的值
value屬性，獲得初始值
2、組件調(diào)用
像Form表單內(nèi)的組件一樣調(diào)用，就可以了
補充知識：Ant Design Pro，用setFieldsValue方法，給嵌套到Form表單中的DatePicker或RangePicker組件設(shè)置默認值
其實用setFieldsValue或者獲取setState方法都可以設(shè)置DatePicker的默認值。
但是關(guān)鍵點在于，引用moment方法轉(zhuǎn)換日期格式
1、setState方法，利用FormItem組件的initialValue屬性設(shè)置默認值：
import moment from 'moment';
this.setState({defaultDate}) // 自定義默認日期
<FormItem label="日期選擇框">
{getFieldDecorator('date', {
initialValue: moment(this.state.defaultDate, 'YYYY-MM-DD'),
})(
<DatePicker format={'YYYY-MM-DD'} />
)}
</FormItem>
2、setFieldsValue方法，利用form的setFieldsValue屬性賦值：
import moment from 'moment';
this.props.form.setFieldsValue({
"date": moment("自定義默認日期", 'YYYY-MM-DD')
})
<FormItem label="日期選擇框">
{getFieldDecorator('date', {
rules: [{ required: true }],
})(
<DatePicker format={'YYYY-MM-DD'} />
)}
</FormItem>
RangePicker同理，只是 initialValue 變成了數(shù)組 [ moment( startDate ) , moment( endDate )]
以上這篇antd Form組件方法getFieldsValue獲取自定義組件的值操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
利用vue對比兩組數(shù)據(jù)差異的可視化組件詳解
這篇文章主要給大家介紹了關(guān)于利用vue對比兩組數(shù)據(jù)差異的可視化組件的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了Vue頭像處理方案，實現(xiàn)思路主要是通過獲取后臺返回頭像url，判斷圖片寬度，高度。具體實例代碼大家參考下本文2018-07-07
這篇文章主要介紹了vue中window.onresize的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue修改proxyTable解決跨域請求,報404的問題及解決
這篇文章主要介紹了vue修改proxyTable解決跨域請求,報404的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要為大家介紹了VUE指令和pinia控制按鈕權(quán)限示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
vue template當(dāng)中style背景設(shè)置不編譯問題
這篇文章主要介紹了vue template當(dāng)中style背景設(shè)置不編譯問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要給大家介紹了關(guān)于Vue3中引入scss文件的方法步驟,在實際項目中,各種樣式往往有很多重復(fù)的情況,為了能夠使樣式的后續(xù)開發(fā)和維護更加愜意,將這些共同的代碼進行命名然后調(diào)用這些變量是一個很好的選擇,需要的朋友可以參考下2023-08-08
vue.js學(xué)習(xí)之UI組件開發(fā)教程
前端開發(fā)中,隨著業(yè)務(wù)的增多,出于效率的考慮,我們對于組件化開發(fā)的需求也越來越迫切。下面這篇文章主要給大家介紹了關(guān)于vue.js之UI組件開發(fā)的相關(guān)資料，文中介紹的非常詳細，需要的朋友們下面來一起看看吧。2017-07-07
這篇文章介紹了vue使用Vuex狀態(tài)管理模式的方法，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-04-04
v3-drag-zoom 是基于 vue3 開發(fā)的一個縮放拖拽組件,方便開發(fā)者快速實現(xiàn)縮放拖拽功能,效果類似地圖的縮放與拖拽,本文給大家介紹了vue3如何快速實現(xiàn)圖片縮放拖拽功能,感興趣的朋友可以參考下2024-04-04