ant design零散

Input, TextArea 的maxLength屬性在2.13.4版本纔開始支持，而且規定是字符串類型：

由提交記錄看出必須是字符串類型：

可是在實際使用時，仍然有些問題，以下：

input框按照要求沒問題

<Input type="text" maxLength="10"/>

可是textarea就有問題了

<TextArea maxLength="10"/>

編譯報錯以下：

嘗試性修改後成功了，無語。。。

<TextArea maxLength={10}/>

資料連接：點我跳轉點我跳轉

表格點擊單行高亮：

在單行點擊事件（例如onRowClick事件，或者column的render中的a標籤的點擊事件）中記錄當前點擊行的index，而後在表格的rowClassName屬性中作判斷，給行加class，以下：

rowClassName={(record, index) => index === bannerListActiveRow?`${style.banner_list_row_active}`:`${style.banner_list_row}`}

其中bannerListActiveRow就是以前保存在state的當前激活行的index，其中用到了ES6新增的反撇號（能夠代替普通的單引號和雙引號，達到在引號中「寫邏輯」的效果）。

自定義數據校驗規則：

1.自定義校驗規則主要用到的是validator方法，而且這個方法中不管什麼時候，都保證要調用一個callback()方法（點我跳轉）；

2.在此校驗方法中，當輸入內容不符合正則時咱們拋出一個錯誤："連接格式不符合要求"，當符合規則時callback不傳值，即校驗經過；

3.注意一點：咱們新增的自定義校驗並不會和原有的 {required: true, message: '請輸入有效的h5連接'} required校驗互斥，required能夠說只是基本的校驗此表單有沒有值，自定義的校驗規則是在原有基礎上新增的；

4.參數validateTrigger能夠設置校驗子節點值的時機，默認值爲onChange；

5.補充一點：開發中遇到一個問題被困擾了好久，我須要爲一些沒法被validateTrigger監聽到的組件（例如某些自定義的組件）自定義校驗規則時，後來發現validator校驗方法只有在validateFields中能夠觸發，因此我在該組件的onChange事件中調用validateFields方法，而且必定要設置options參數中的force爲true，讓他能夠正常監聽，否則就算在組件的onChange事件中調用，也只會觸發一次，以下：

this.props.form.validateFields(["fieldNames"],{force:true},(err, values) => {});

自定義校驗規則實例：

h5UrlValidator=(rule:any, value:string, callback:any)=>{
    let h5UrlReg = /^([hH][tT]{2}[pP][sS]:\/\/)/;
    if(!h5UrlReg.test(value)){
      callback("連接格式不符合要求");
    }
    callback();
}

<FormItem>
    <div>h5連接</div>
        {form.getFieldDecorator('hFiveUrl', {
            rules: [
                {required: true, message: '請輸入有效的h5連接'},
                { validator: this.h5UrlValidator }
            ],
　　         validateTrigger: ['onBlur','onChange'],
            initialValue: ""
    })(<Input placeholder="僅支持前綴爲https://的有效連接" />)}
</FormItem>

this.props.form.resetFields()的應用舉例：

開發中發現，若是Modal中有form表單，當表單填寫了數據後，關閉Modal，再次打開時發現，表單中仍是上次填充的數據。解決這個問題的辦法即在每次打開Modal時調用 this.props.form.resetFields(); 重置一組輸入控件的值與狀態，若是不傳參數，則重置全部表單。（點我跳轉）