解決ant Design中this.props.form.validateFields未執(zhí)行的問題
在使用ant Designd的 form 組件時(shí)發(fā)現(xiàn)點(diǎn)擊提交方法中 this.props.form.validateFields((err, values) => {}) 部分未執(zhí)行，也沒有報(bào)錯(cuò)。
原因：
我使用了自定義校驗(yàn) validator ，在自定義校驗(yàn)方法中有個(gè)錯(cuò)誤，使用了未定義的變量。
注意：
1、使用validator 時(shí)，注意自定義方法中是否有錯(cuò)誤；對(duì)于如何解決沒有錯(cuò)誤提示，官網(wǎng)提示：可以選擇通過 async 返回一個(gè) promise 或者使用 try...catch進(jìn)行錯(cuò)誤捕獲，具體查看官網(wǎng)form組件；
2、使用validator 時(shí)，自定義方法中 callback 必須被調(diào)用。
補(bǔ)充知識(shí)：ant design vue 表單域的validateFields取值和子item的change取值的先后問題
廢話不多，先咔的擼出代碼先
我先在created中初始化表單域form
然后在表單域子節(jié)點(diǎn)中綁定@change="handleChange"函數(shù)，
然后我設(shè)想是每一次單選完后打印出單選后的值
然而結(jié)果是每次打印的值是單選前的值，比如：
我開始時(shí)默認(rèn)選正常，第一次選異常，打印出正常
第二次選正常，結(jié)果打印出異常
我懵逼了，一般出現(xiàn)這種情況應(yīng)該是跟事件機(jī)制同步或者異步的先后順序有關(guān)，于是仔細(xì)設(shè)置了validateFields為異步輸出
這回輸出正常了，
果然是，個(gè)人猜測(cè)是輸入框的change事件賦值發(fā)生在表單域的validateFields（）事件之后，導(dǎo)致取到的值是修改前的值
以上這篇解決ant Design中this.props.form.validateFields未執(zhí)行的問題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了elementUI踩坑記錄-el-table問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue結(jié)合el-table實(shí)現(xiàn)表格行拖拽排序(基于sortablejs)
這篇文章主要介紹了vue結(jié)合el-table實(shí)現(xiàn)表格行拖拽排序(基于sortablejs),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-01-01
vue中的虛擬dom知識(shí)點(diǎn)總結(jié)
這篇文章主要介紹了vue中的虛擬dom知識(shí)點(diǎn)總結(jié)，文章圍繞主題內(nèi)容展開詳細(xì)介紹，需要的小伙伴可以參考一下，希望對(duì)你的學(xué)習(xí)有所幫助2022-04-04
在開發(fā)Vue應(yīng)用時(shí),我們經(jīng)常需要在多個(gè)組件中復(fù)用一些通用的函數(shù)或方法,這些函數(shù)可能是我們自己編寫的工具函數(shù),也可能是從第三方庫中導(dǎo)入的,下面我們就來看看如何正確引用和使用外部方法吧2024-01-01
這篇文章主要為大家詳細(xì)介紹了vue富文本編輯器組件vue-quill-edit的使用教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-09-09
Vant是一個(gè)專為移動(dòng)端設(shè)計(jì)的輕量級(jí)組件庫,自2017年開源以來,提供了Vue2、Vue3及多平臺(tái)版本支持,安裝Vant時(shí)需要注意版本兼容問題,Vue3項(xiàng)目應(yīng)安裝最新版Vant3,而Vue2項(xiàng)目則需安裝Vant2,安裝錯(cuò)誤時(shí),需卸載后重新安裝正確版本2024-10-10
這篇文章主要介紹了在Vue和React中如何優(yōu)雅地使用loading，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
在Vue中,有兩種常用的CSS選擇器,用于修改組件樣式：scoped?和?/deep/（或?::v-deep）,它們都是為了實(shí)現(xiàn)樣式的作用域,本文小編就來分別給大家介紹一下這兩種選擇器的原理,需要的朋友可以參考下2023-08-08
vue-devtools?開發(fā)工具插件之支持vue3?chrome?瀏覽器插件
這篇文章主要介紹了vue-devtools?開發(fā)工具插件之支持vue3?chrome?瀏覽器插件,用這個(gè)版本主要是為了支持vue3?推薦直接下載，文中給大家提供了下載地址，感興趣的朋友跟隨小編一起看看吧2022-01-01
下面小編就為大家分享一篇搭建element-ui的Vue前端工程操作實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02