antd的form中棄用了getfieldprops,改為了getfielddecorator,現在記錄一下相關的用法。
getfielddecorator用於資料的互動反饋
之前對於getfieldprops,首先定義是const = this.props.form;
現在對於getfielddecorator,沒有變化const = this.props.form;
對於表單元素formitem中的呼叫變化較大:
之前:
現在:
經過 getfielddecorator 包裝的控制項,表單控制項會自動新增 value(或 valuepropname 指定的其他屬性) onchange(或 trigger 指定的其他屬性),資料同步將被 form 接管,這會導致以下結果:
你不再需要也不應該用 onchange 來做同步,但還是可以繼續監聽 onchange 等事件。
你不能用控制項的 value defaultvalue 等屬性來設定表單域的值,預設值可以用 getfielddecorator 裡的 initialvalue。你不能用控制項的 value defaultvalue 等屬性來設定表單域的值,預設值可以用 getfielddecorator 裡的 initialvalue.
你不應該用 setstate,可以使用 this.props.form.setfieldsvalue 來動態改變表單值。你不應該用 setstate,可以使用 this.props.form.setfieldsvalue 來動態改變表單值。
getfielddecorator(id, options) 引數
id是必填引數,表示輸入控制項唯一標誌 string
引數說明
型別預設值
id必填,輸入控制項唯一標誌
string
options
選填,表以物件字面量的形式表示相應的選項
對於options ,有以下屬性:
屬性說明
型別預設值
getvaluefromevent
指定如何從事件中獲取值,可以把 onchange 的引數(如 event)轉化為控制項的值
function(…args)
initialvalue
子節點的初始值,型別、可選值均由子節點決定(注意:由於內部校驗時使用 === 判斷是否變化,建議使用變數快取所需設定的值而非直接使用字面量))
normalize
轉換預設的 value 給控制項
function(value, prevvalue, allvalues): any
rules
校驗規則,見下方**
object
trigger
收集子節點的值的時機
string
『onchange』
validatefirst
當某一規則校驗不通過時,是否停止剩下的規則的校驗
boolean
validatetrigger
校驗子節點值的時機
string
string
valuepropname
子節點的值的屬性,如 switch 的是 『checked』
string
『value』
上文說的校驗規則:
引數說明
型別預設值
enum
列舉型別
string
-len
字段長度
number
-max
最大長度
number
-message
校驗文案
string
reactnode
min最小長度
number
-pattern
正規表示式校驗
regexp
-required
是否必選
boolean
false
transform
校驗前轉換字段值
function(value) => transformedvalue:any
-type
內建校驗型別,可選項
string
『string』
validator
自定義校驗(注意,callback 必須被呼叫)
function(rule, value, callback)
-whitespace
必選時,空格是否會被視為錯誤
boolean
false
樣例分析
)(
click to upload
)}
,
],})(
redgreen
blue
)}
getfielddecorator(id, options) 之後是什麼
可以看到getfielddecorator(id, options) 之後還有乙個(),此處()裡面的內容表示要應用getfielddecorator的元素。
之前的getfieldprops是如下寫法:
即將其作為
的乙個屬性。
而現在的getfielddecorator可以說是作為了乙個函式使用:
後面的()
就表示要將getfielddecorator應用的元素位置。 Antd中單個DatePicker限定時間輸入範圍
這樣就只能選擇從當天算起到七天後的日期,但是時間的時分秒是你選擇的時候系統時間的時分秒,這個有需要的話要額外處理,比如設定為當天起始值 sethours hours,min,sec,ms let day date new date date sethours 0,0,0,0 0 disabledda...
react中覆蓋antd元件的樣式
由於業務的個性化需求,我們經常會遇到需要覆蓋元件樣式的情況,這裡舉個簡單的例子。antd select 在多選狀態下,缺省會展示所有選中項,這裡我們給它加乙個限制高度,超過此高度就出滾動條。import from antd import styles from testpage.less const...
react中修改antd的預設樣式
最近在做react antd專案。不可避免的遇到了修改antd預設樣式的問題。比如,table元件的表頭背景色設定,如果直接使用元素樣式,會修改整個專案的table。這裡我用的方法是,給table新增乙個div父元素,給他設定個classname,然後設定這個樣式內的table表頭樣式。我使用的.l...