在antd4.0中Form使用initialValue操作
悲傷
一開始一直以為initialValue是個(gè)好東西，這樣我每次編輯的時(shí)候把數(shù)據(jù)傳過來就行，后來發(fā)現(xiàn)不得行！給大家看看
就離譜，后面認(rèn)真看了一下文檔才知道這個(gè)玩意是默認(rèn)值，第一次有了之后就一直是這個(gè)。
然后我在網(wǎng)上看用resetFields()這個(gè)方法，每次提交或者取消之后重置一下數(shù)據(jù)，然而我試了還是不得行，會(huì)變成每次點(diǎn)擊顯示的是上一次的數(shù)據(jù)，所以后面還是老老實(shí)實(shí)看了一下form的其他方法。
貼個(gè)圖
解決
放棄initialValue
const [form] = useForm()
form.setFielsValue(currentItem)
用form帶的設(shè)置數(shù)據(jù)方法。這樣能夠保證每次都是最新的。
隨手一貼
也沒啥上下文，就將就著看寫法就行??！
const { visible, onEdit, onCancel, type, currentItem, ...modalProps } = props;
const [form] = useForm()
useEffect(() => {
form.setFieldsValue({ ...currentItem });
}, [visible])
const onOk = () => {
form.validateFields().then((values: any) => {
onEdit(values)
})
}
補(bǔ)充知識(shí)：antd Form表單initialValue設(shè)置無效的問題之一
在表格數(shù)據(jù)中，編輯數(shù)據(jù)時(shí)用到的表單需要使用initialValue 來設(shè)置初始值，
以下寫法會(huì)導(dǎo)致initialValue設(shè)置無效。
當(dāng)表單組件被<></> ，< div></ div> 等包裹時(shí)，initialValue設(shè)置無效
// initialValue 設(shè)置無效的寫法
<Form.Item label="xxx">
{getFieldDecorator('xxx',{
initialValue:'default'
})(
<>
<Input />
<span>....</span>
</>
)
}
</Form.Item>
// 正確的寫法
<Form.Item label="xxx">
{getFieldDecorator('xxx',{
initialValue:'default'
})(
<Input />
)
}
// <span></span>
</Form.Item>
以上這篇在antd4.0中Form使用initialValue操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)Input輸入框模糊查詢方法
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)Input輸入框模糊查詢方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
如何使用vue slot創(chuàng)建一個(gè)模態(tài)框的實(shí)例代碼
這篇文章主要介紹了如何使用vue slot創(chuàng)建一個(gè)模態(tài)框,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-05-05
使用elementUI實(shí)現(xiàn)將圖片上傳到本地的示例
今天小編就為大家分享一篇使用elementUI實(shí)現(xiàn)將圖片上傳到本地的示例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue2如何使用vue-i18n搭建多語言切換環(huán)境
這篇文章主要介紹了vue2-使用vue-i18n搭建多語言切換環(huán)境的相關(guān)知識(shí),在data(){}中獲取的變量存在更新this.$i18n.locale的值時(shí)無法自動(dòng)切換的問題,需要刷新頁面才能切換語言,感興趣的朋友一起看看吧2023-12-12
vue3中?provide?和?inject?用法小結(jié)
父子組件傳遞數(shù)據(jù)時(shí),使用的是props和emit,父傳子時(shí),使用的是?props,如果是父組件傳孫組件時(shí),就需要先傳給子組件,子組件再傳給孫組件,如果多個(gè)子組件或多個(gè)孫組件使用時(shí),就需要傳很多次,會(huì)很麻煩,這篇文章主要介紹了vue3中?provide?和?inject?用法,需要的朋友可以參考下2023-11-11
mpvue性能優(yōu)化實(shí)戰(zhàn)技巧(小結(jié))
這篇文章主要介紹了mpvue性能優(yōu)化實(shí)戰(zhàn)技巧(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue-router路由參數(shù)刷新消失的問題解決方法
本篇文章主要介紹了vue-router路由參數(shù)刷新消失的問題解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
深入理解Vue的插件機(jī)制與install詳細(xì)
這篇文章主要介紹的是深入理解Vue的插件機(jī)制與install，文章主要是講解install函數(shù)可以做些什么、install內(nèi)部是怎么實(shí)現(xiàn)的、 Vuex，Vue-Router插件在install期間到底干了什么,需要的小伙伴可以參考一下2021-09-09
這篇文章主要為大家詳細(xì)介紹了vue-Split實(shí)現(xiàn)面板分割，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家介紹了Vue前端路由hash與history差異的深入了解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06