溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

ant Design中this.props.form.validateFields未執(zhí)行怎么解決

發(fā)布時間:2020-10-28 14:46:54 來源:億速云 閱讀:780 作者:Leah 欄目:開發(fā)技術(shù)

這篇文章將為大家詳細(xì)講解有關(guān)ant Design中this.props.form.validateFields未執(zhí)行怎么解決,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個參考,希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

在使用ant Designd的 form 組件時發(fā)現(xiàn)點(diǎn)擊提交方法中 this.props.form.validateFields((err, values) => {}) 部分未執(zhí)行,也沒有報錯。

原因:

我使用了自定義校驗(yàn) validator ,在自定義校驗(yàn)方法中有個錯誤,使用了未定義的變量。

注意:

1、使用validator 時,注意自定義方法中是否有錯誤;對于如何解決沒有錯誤提示,官網(wǎng)提示:可以選擇通過 async 返回一個 promise 或者使用 try...catch進(jìn)行錯誤捕獲,具體查看官網(wǎng)form組件;

2、使用validator 時,自定義方法中 callback 必須被調(diào)用。

補(bǔ)充知識:ant design vue 表單域的validateFields取值和子item的change取值的先后問題

廢話不多,先咔的擼出代碼先

我先在created中初始化表單域form

ant Design中this.props.form.validateFields未執(zhí)行怎么解決

然后在表單域子節(jié)點(diǎn)中綁定@change="handleChange"函數(shù),

ant Design中this.props.form.validateFields未執(zhí)行怎么解決

然后我設(shè)想是每一次單選完后打印出單選后的值

ant Design中this.props.form.validateFields未執(zhí)行怎么解決

然而結(jié)果是每次打印的值是單選前的值,比如:

我開始時默認(rèn)選正常,第一次選異常,打印出正常

第二次選正常,結(jié)果打印出異常

ant Design中this.props.form.validateFields未執(zhí)行怎么解決

我懵逼了,一般出現(xiàn)這種情況應(yīng)該是跟事件機(jī)制同步或者異步的先后順序有關(guān),于是仔細(xì)設(shè)置了validateFields為異步輸出

ant Design中this.props.form.validateFields未執(zhí)行怎么解決

這回輸出正常了,

ant Design中this.props.form.validateFields未執(zhí)行怎么解決

果然是,個人猜測是輸入框的change事件賦值發(fā)生在表單域的validateFields()事件之后,導(dǎo)致取到的值是修改前的值

關(guān)于ant Design中this.props.form.validateFields未執(zhí)行怎么解決就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI