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(); 重置一組輸入控件的值與狀態，如果不傳參數，則重置所有表單。（點我跳轉）