antd中getFieldDecorator的應用

2021-09-02 02:06:14 字數 2820 閱讀 4620

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...