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對(duì)比兩組數(shù)據(jù)差異的可視化組件詳解
這篇文章主要給大家介紹了關(guān)于利用vue對(duì)比兩組數(shù)據(jù)差異的可視化組件的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了Vue頭像處理方案，實(shí)現(xiàn)思路主要是通過(guò)獲取后臺(tái)返回頭像url，判斷圖片寬度，高度。具體實(shí)例代碼大家參考下本文2018-07-07
這篇文章主要介紹了vue中window.onresize的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue修改proxyTable解決跨域請(qǐng)求,報(bào)404的問(wèn)題及解決
這篇文章主要介紹了vue修改proxyTable解決跨域請(qǐng)求,報(bào)404的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要為大家介紹了VUE指令和pinia控制按鈕權(quán)限示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
vue template當(dāng)中style背景設(shè)置不編譯問(wèn)題
這篇文章主要介紹了vue template當(dāng)中style背景設(shè)置不編譯問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要給大家介紹了關(guān)于Vue3中引入scss文件的方法步驟,在實(shí)際項(xiàng)目中,各種樣式往往有很多重復(fù)的情況,為了能夠使樣式的后續(xù)開發(fā)和維護(hù)更加愜意,將這些共同的代碼進(jìn)行命名然后調(diào)用這些變量是一個(gè)很好的選擇,需要的朋友可以參考下2023-08-08
vue.js學(xué)習(xí)之UI組件開發(fā)教程
前端開發(fā)中,隨著業(yè)務(wù)的增多,出于效率的考慮,我們對(duì)于組件化開發(fā)的需求也越來(lái)越迫切。下面這篇文章主要給大家介紹了關(guān)于vue.js之UI組件開發(fā)的相關(guān)資料，文中介紹的非常詳細(xì)，需要的朋友們下面來(lái)一起看看吧。2017-07-07
這篇文章介紹了vue使用Vuex狀態(tài)管理模式的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-04-04
vue3實(shí)現(xiàn)圖片縮放拖拽功能的示例代碼
v3-drag-zoom 是基于 vue3 開發(fā)的一個(gè)縮放拖拽組件,方便開發(fā)者快速實(shí)現(xiàn)縮放拖拽功能,效果類似地圖的縮放與拖拽,本文給大家介紹了vue3如何快速實(shí)現(xiàn)圖片縮放拖拽功能,感興趣的朋友可以參考下2024-04-04