【React】antd的form表單的自定義校驗規則的用法

在用到antd的Form組件的時候，可能會用到自定義的規則，以我的項目爲例：在輸入名稱的時候需要請求接口，校驗的內容是後臺返回的內容，所以這個時候需要用到自定義的校驗規則

關於自定義校驗方法：antd官網提供了方法validator，如下：函數由3個參數組成，rule是規則，value是你輸入的值，callback是個回調函數

那麼具體的寫法如下：將validator放在rules的數組中

<FormItem label={label} {...formItemLayout} key={field}>
  {
      getFieldDecorator(field, {
           rules:[{
                   required:required,
                   message: requiredMsg,
                },{
                    validator: this.validateServiceName
                   }],
             })(
                    <Input  type="text" placeholder='test'   />
                 )
     }
   </FormItem>;

調用的方法如下：當value在變化的時候請求接口，通過接口返回的值傳給callback回調函數

//注意：在這裏我只用到了value和callback，沒有自定義rule
  validateServiceName =(rule, value, callback)=>{
        console.log(value)
        this.setState({
           onlyName: value 
        },()=>{
            this.nameChange(callback)
        })
    }
    //這塊是請求接口的方法：
    nameChange =(callback)=> {
        axios.get("/api/credit-serve/serve/checkServeName",
            {params:{serveName: this.state.onlyName}
        }
    )
        .then(res=>{
            if(res.data.responseCode === 0){
                callback()
            }else{
                callback(res.data.responseMsg)
            }
        })

    }