解決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)文章
vue修改vue項(xiàng)目運(yùn)行端口號(hào)的方法
本篇文章主要介紹了vue修改vue項(xiàng)目運(yùn)行端口號(hào)的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08vue3源碼分析reactivity實(shí)現(xiàn)原理
這篇文章主要為大家介紹了vue3源碼分析reactivity實(shí)現(xiàn)原理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01對(duì)vuex中g(shù)etters計(jì)算過濾操作詳解
今天小編就為大家分享一篇對(duì)vuex中g(shù)etters計(jì)算過濾操作詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11Vux+Axios攔截器增加loading的問題及實(shí)現(xiàn)方法
這篇文章主要介紹了Vux+Axios攔截器增加loading的問題及實(shí)現(xiàn)方法,文中通過實(shí)例代碼介紹了vue中使用axios的相關(guān)知識(shí),需要的朋友可以參考下2018-11-11Vue動(dòng)態(tài)添加屬性到data的實(shí)現(xiàn)
在vue中請(qǐng)求接口中,一個(gè)請(qǐng)求方法可能對(duì)應(yīng)后臺(tái)兩個(gè)請(qǐng)求接口,所以請(qǐng)求參數(shù)就會(huì)有所不同。需要我們先設(shè)置共同的參數(shù),然后根據(jù)條件動(dòng)態(tài)添加參數(shù)屬性2022-08-08