antd 表單 校驗 取值 重置

2021-10-19 12:58:54 字數 1000 閱讀 9151

上次接觸 react 是一年多以前了,再寫的時候發現 antd 有了些改動。總結一下。

首先要在表單上定義乙個 ref。

然後在 class 裡面定義 formref. 這個最好定義在比較靠前的位置,這樣方便後面要用到的時候不會出現引用錯誤。

獲取到 form 例項。這個地方**我截掉了用不到的一段,這個 val 就是拿到的合法表單值。記得要寫 catch ,因為 curform 返回的是 promise 物件,校驗不通過又沒有加 catch ,會容易在控制台報錯。

這個地方值得注意的有一點,就是 如果表單放在彈窗裡,那麼重置的時候可能會報錯。大意是說重置的物件不存在。因為如果 ref 是用到的時候才載入,所以想要在彈出之前重置就會出問題。

解決方案就是在 modal 新增 forcerender 。或者說在 表單 載入完成後在去進行重置。

就在 modal 上直接新增就好。

const form = this.formref.current;

form.resetfields();

然後通過這兩行**進行表單重置。

antd 校驗表單時觸發對其他表單的校驗

import from antd import react,from react class componenta extends component param rule param vaule param callback checkpsd rule,value,callback render ...

antd 表單的校驗方式

1.宣告式表單驗證 name username rules placeholder username 2.validator自定義式驗證 name password rules else prefix type password placeholder password 因為是在表單裡寫的,所以有點...

重置表單驗證 清除表單校驗資訊

vue給了乙個特殊屬性 key 詳細可以參照vue文件,vue 會使用一種最大限度減少動態元素並且盡可能的嘗試就地修改 復用相同型別元素的演算法。key 可以用於強制替換元素 元件而不是重複使用它。只需要保證每次生成的 key 值不一樣,就會重新渲染。用 new date 時間戳生成乙個每次都不一樣...