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