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 授權(quán)獲取微信openId操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了Vue 組件的掛載與父子組件的傳值實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue-router中hash模式與history模式的區(qū)別
為了構(gòu)建 SPA（單頁面應(yīng)用）,需要引入前端路由系統(tǒng),這就是 Vue-Router 存在的意義,而這篇文章主要給大家介紹了關(guān)于vue-router中兩種模式區(qū)別的相關(guān)資料，分別是hash模式、history模式,需要的朋友可以參考下2021-06-06
當(dāng)頁面刷新時,Vuex?的?state?數(shù)據(jù)會丟失,這是因為?Vuex?的狀態(tài)存儲在內(nèi)存中,刷新瀏覽器會重置?JavaScript?的運行環(huán)境,下面我將詳細介紹幾種解決方案,從簡單到復(fù)雜,幫助你根據(jù)項目需求選擇最適合的方法,需要的朋友可以參考下2025-04-04
這篇文章主要介紹了vue引入js數(shù)字小鍵盤的實現(xiàn)代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-05-05
這篇文章主要介紹了vue router仿天貓底部導(dǎo)航欄功能,需要的朋友可以參考下2017-10-10
vue實現(xiàn)錨點跳轉(zhuǎn)之scrollIntoView()方法詳解
這篇文章主要介紹了vue實現(xiàn)錨點跳轉(zhuǎn)之scrollIntoView()方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue3 element-plus如何使用icon圖標(biāo)組件
這篇文章主要介紹了vue3 element-plus如何使用icon圖標(biāo)組件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue使用$emit時,父組件無法監(jiān)聽到子組件的事件實例
下面小編就為大家分享一篇vue使用$emit時,父組件無法監(jiān)聽到子組件的事件實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了vue中如何使用element的日歷組件，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-09-09