在antd4.0中Form使用initialValue操作
悲傷
一開始一直以為initialValue是個好東西，這樣我每次編輯的時候把數(shù)據(jù)傳過來就行，后來發(fā)現(xiàn)不得行！給大家看看
就離譜，后面認真看了一下文檔才知道這個玩意是默認值，第一次有了之后就一直是這個。
然后我在網(wǎng)上看用resetFields()這個方法，每次提交或者取消之后重置一下數(shù)據(jù)，然而我試了還是不得行，會變成每次點擊顯示的是上一次的數(shù)據(jù)，所以后面還是老老實實看了一下form的其他方法。
貼個圖
解決
放棄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)
})
}
補充知識：antd Form表單initialValue設(shè)置無效的問題之一
在表格數(shù)據(jù)中，編輯數(shù)據(jù)時用到的表單需要使用initialValue 來設(shè)置初始值，
以下寫法會導(dǎo)致initialValue設(shè)置無效。
當(dāng)表單組件被<></> ，< div></ div> 等包裹時，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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
最近在做一些數(shù)據(jù)透析的項目需要用到報表圖，那么報表圖好用的有老牌的ECharts，比較新意的AntV，思前馬后的想了一下還是用了Echarts，這篇文章主要介紹了vue3中使用Apache?ECharts,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue-router之解決addRoutes使用遇到的坑，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue根據(jù)權(quán)限動態(tài)渲染按鈕、組件等的函數(shù)式組件實現(xiàn)
這篇文章主要介紹了vue根據(jù)權(quán)限動態(tài)渲染按鈕、組件等的函數(shù)式組件實現(xiàn)方式,具有很好的參考價值,希望杜大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
vue動態(tài)刪除從數(shù)據(jù)庫倒入列表的某一條方法
今天小編就為大家分享一篇vue動態(tài)刪除從數(shù)據(jù)庫倒入列表的某一條方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue中ref標(biāo)簽屬性和$ref的關(guān)系解讀
這篇文章主要介紹了vue中ref標(biāo)簽屬性和$ref的關(guān)系，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
在有些情況下我們會有合并表頭、合并列、合并尾部合計的需求,這篇文章主要給大家介紹了關(guān)于前端vue中el-table增加合計行及合并單元格的相關(guān)資料,需要的朋友可以參考下2023-09-09
本文是腳本之家小編給大家收藏整理的關(guān)于vue項目中遇到的一點小問題，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
Element-Plus的ClickOutside指令導(dǎo)致內(nèi)存泄漏的解決辦法
這篇文章給大家介紹了Element-Plus的ClickOutside指令導(dǎo)致內(nèi)存泄漏的解決辦法,文中給出了詳細的解決辦法,遇到同樣問題的小伙伴可以參考閱讀一下本文2024-01-01
這篇文章主要介紹了Vue的方法和屬性案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-07-07
vue登錄頁實現(xiàn)使用cookie記住7天密碼功能的方法
這篇文章主要介紹了vue登錄頁實現(xiàn)使用cookie記住7天密碼功能的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02