antd Form組件方法getFieldsValue獲取自定義組件的值操作
自定義組件
1、自定義組件被getFieldsValue包裹，會(huì)獲得以下屬性
onChange方法, 子組件調(diào)用此方法，可將值傳給父組件，從而Form可拿到自定義組件的值
value屬性，獲得初始值
2、組件調(diào)用
像Form表單內(nèi)的組件一樣調(diào)用，就可以了
補(bǔ)充知識(shí)：Ant Design Pro，用setFieldsValue方法，給嵌套到Form表單中的DatePicker或RangePicker組件設(shè)置默認(rèn)值
其實(shí)用setFieldsValue或者獲取setState方法都可以設(shè)置DatePicker的默認(rèn)值。
但是關(guān)鍵點(diǎn)在于，引用moment方法轉(zhuǎn)換日期格式
1、setState方法，利用FormItem組件的initialValue屬性設(shè)置默認(rèn)值：
import moment from 'moment';
this.setState({defaultDate}) // 自定義默認(rèn)日期
<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("自定義默認(rèn)日期", '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獲取自定義組件的值操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue 授權(quán)獲取微信openId操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
這篇文章主要介紹了Vue 組件的掛載與父子組件的傳值實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
vue-router中hash模式與history模式的區(qū)別
為了構(gòu)建 SPA（單頁(yè)面應(yīng)用）,需要引入前端路由系統(tǒng),這就是 Vue-Router 存在的意義,而這篇文章主要給大家介紹了關(guān)于vue-router中兩種模式區(qū)別的相關(guān)資料，分別是hash模式、history模式,需要的朋友可以參考下2021-06-06
當(dāng)頁(yè)面刷新時(shí),Vuex?的?state?數(shù)據(jù)會(huì)丟失,這是因?yàn)?Vuex?的狀態(tài)存儲(chǔ)在內(nèi)存中,刷新瀏覽器會(huì)重置?JavaScript?的運(yùn)行環(huán)境,下面我將詳細(xì)介紹幾種解決方案,從簡(jiǎn)單到復(fù)雜,幫助你根據(jù)項(xiàng)目需求選擇最適合的方法,需要的朋友可以參考下2025-04-04
vue引入js數(shù)字小鍵盤的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue引入js數(shù)字小鍵盤的實(shí)現(xiàn)代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-05-05
這篇文章主要介紹了vue router仿天貓底部導(dǎo)航欄功能,需要的朋友可以參考下2017-10-10
vue實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)之scrollIntoView()方法詳解
這篇文章主要介紹了vue實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)之scrollIntoView()方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue3 element-plus如何使用icon圖標(biāo)組件
這篇文章主要介紹了vue3 element-plus如何使用icon圖標(biāo)組件問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue使用$emit時(shí),父組件無(wú)法監(jiān)聽到子組件的事件實(shí)例
下面小編就為大家分享一篇vue使用$emit時(shí),父組件無(wú)法監(jiān)聽到子組件的事件實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
這篇文章主要介紹了vue中如何使用element的日歷組件，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-09-09