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