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