涓€銆佷粙缁嶅皬鎶€宸э紝甯姪澶у鏇存繁鍏ョ殑鐞嗚ВForm琛ㄥ崟楠岃瘉锛屼互鍙婅仈鍔ㄩ獙璇佺殑璁ょ煡鍜屽疄璺点€傛湰鏂囩殑閲嶇偣鏄疐orm琛ㄥ崟鐨勯獙璇佸強鍏跺湪鏁版嵁鏍堜腑鐨勫簲鐢紝鍋忓悜浜庡簲鐢ㄦ€荤粨鍜岀粡楠屽垎浜€備紬鎵€鍛ㄧ煡锛屾垜浠嚭鐢熷湪鏈€濂界殑鏃朵唬锛宎ntd宸茬粡涓烘垜浠皝瑁呬簡澶ч儴鍒嗗姛鑳斤紝闅忔椂鍙互浣跨敤锛孉PI涔熷緢璇︾粏锛屼絾鍗充究濡傛锛宎ntd鐨勫紑鍙戣€呰繕鍦ㄤ竴閬嶅張涓€閬嶇殑浼樺寲涓婂綋鍓嶅熀纭€鍥犳锛岀瑪鑰呭笇鏈涜繖绡囨枃绔犱笉浠呰兘缁欏ぇ瀹跺甫鏉ヤ竴浜涘垱涓氱殑蹇冨緱鈥嬧€嬶紝鏇磋兘缁欏ぇ瀹跺甫鏉ヤ竴浜涘惎鍙戙€侳orm琛ㄥ崟鐨勫叾浠栧唴瀹癸紝鎴戜細鍦‵orm琛ㄥ崟鍦ㄦ暟鎹爤涓殑搴旂敤涓笌澶у瑙侀潰锛堜笅锛夈€?.浠€涔堟槸褰㈠紡锛熺浉淇″ぇ瀹跺湪鏃ュ父寮€鍙戜腑瀵笷orm鐨勪娇鐢ㄥ凡缁忛潪甯哥啛缁冧簡锛屼絾鏄潪甯稿€煎緱涓€鎻愮殑鏄紝澶у鍙兘浼氭湁鐤戦棶鈥淔orm鐨勫畾涔夋槸浠€涔堬紵鎴戜滑浠€涔堟椂鍊欎細閫夋嫨浣跨敤form锛熲€濋棶棰樺線寰€寰椾笉鍒板緢濂界殑鍥炵瓟銆傚畾涔夛細鍏锋湁鏁版嵁閲囬泦銆佹牎楠屽拰鎻愪氦鍔熻兘鐨勮〃鍗曪紝鍖呮嫭澶嶉€夋銆佸崟閫夋銆佽緭鍏ユ銆佷笅鎷夐€夋嫨妗嗙瓑鍏冪礌锛涚敤娉曪細褰撴垜浠敤鏉ュ垱寤哄疄浣撴垨鑰呮敹闆嗕俊鎭紝鎴栬€呴渶瑕佸杈撳叆鐨勬暟鎹被鍨嬭繘琛屾牎楠屾椂锛屽彲浠ヤ娇鐢‵orm琛ㄥ崟銆?.琛ㄥ崟鍩熼獙璇侊紙FormItem锛夐鍏堟垜浠湅涓€涓媋ntd鎻愪緵鐨勪袱绉嶅熀鏈殑琛ㄥ崟鍩熼獙璇佹柟寮?****鈥滃０鏄庡紡鈥濊〃鍗曢獙璇?***/{getFieldDecorator('input',{})({this.handleClickOne(e)}}placeholder="璇疯緭鍏ヤ竴涓€?/>)}/****"鑷畾涔?琛ㄥ崟楠岃瘉****/{getFieldDecorator('input_controlled',{validateTrigger:'onBlur',rules:[{required:true,message:'璇疯緭鍏ュ瘑鐮侊紒'},{min:5,message:'瀵嗙爜闀垮害蹇呴』鑷冲皯涓?锛?},{validator:this.checkInputValue}]})()}checkInputValue=(rule,value,callback)=>{if(!value)returncallback('璇疯緭鍏ュ瘑鐮侊紒')if(value.length<=2){callback('闀垮害鑷冲皯寰堝ぇterthan2')}if(value!=='222'){callback('瀵嗙爜涓嶆纭?)}callback()}please鎬濊€冿細涓婇潰鐨刢ustomcheck鍙互浼樺寲浠€涔堬紵鐩存帴鍐檆allBack('string')鑰屼笉鏄畼缃戠殑callingBack(newError('sting'))鏄笉鏄繚娉曪紵鍏跺疄涓嶆槸杩欐牱鐨勶細鍦╮c-field-form涓紝鏄庣‘鎸囧嚭鍙傛暟error鐨勭被鍨嬪叾瀹炴槸sting銆傚綋鐒跺啓鎴恘ewError鍙兘鐪嬭捣鏉ユ洿浼橀泤锛屼絾鏄洿鎺ュ啓鎴恠tring涔熶笉浼氶敊锛涙棦鐒惰嚜瀹氫箟浜唙alidator锛岃兘涓嶈兘绠€鍖栨垚鍙啓涓€涓紵瀵逛簬rules涓畾涔夌殑澶氫釜瑙勫垯锛屽鏋滀竴涓墽琛屽け璐ワ紝灏变笉鍐嶆墽琛岋紵浼氫笉浼氭湁閲嶅鎻愮ず瑙勫垯鐨勯棶棰橈紵棣栧厛锛岃鍒欎腑瀹氫箟鐨勮鍒欏皢琚竴涓€鎵ц锛涗唬鐮佺畝鍖栨樉鐒舵槸鍙互鐨勶紝浣嗗彲鑳芥槸涔犳儻闂銆傜瑪鑰呯湅杩囦竴浜涢」鐩殑涓氬姟浠ｇ爜锛屼絾鏄鏍煎拰涓婇潰鐨勪唬鐮佹槸涓€鏍风殑銆備慨鏀瑰悗鐨勪唬鐮佸涓嬶細})()}checkInputValue=(rule,value,callback)=>{if(!value)returncallback(newError('The瀵嗙爜涓嶈兘涓虹┖锛?))if(value.length<=5){returncallback('闀垮害鑷冲皯澶т簬2')}if(value!=='222'){returncallback('瀵嗙爜涓嶆纭?)}鈥︹€?/鎺ュ彛楠岃瘉绛塩allback()}涓嶉毦鐪嬪嚭锛岀粡杩囨敼閫犲悗锛屾垜浠竴鐪煎氨鑳界湅鍒伴渶瑕佺殑楠岃瘉瑙勫垯锛屾湁鍒╀簬鍚庢湡鎺掓煡銆傚綋瑙勫垯澶鏃讹紝鎮ㄥ皢涓嶄細鍚戜笂鍜屽悜涓嬫煡鎵俱€?.琛ㄥ崟鍊奸獙璇侊紙ValidateFields锛夎瀹孎ormItem锛岀幇鍦ㄨ浆杩囧ご鏉ョ湅鐪媀alidateFields銆備袱涓猟emodemo濡備笅鎵€绀恒€?涓嶈禈杩?.鏍￠獙琛ㄥ崟鍊肩殑鎵€鏈夊瓧娈佃繖涓湪鏁版爤涓敤鐨勬瘮杈冮绻併€備竴鑸湪鎻愪氦琛ㄥ崟鏁版嵁鐨勬椂鍊欙紝鍏堟牎楠屽綋鍓嶆墍鏈夌殑琛ㄥ崟鍩熴€傚彧鏈夋墍鏈夊瓧娈甸兘閫氳繃楠岃瘉鍚庯紝鎵嶈兘杩涜涓嬩竴姝ユ搷浣溿€傦紙鎺ュ彛璋冩暣銆佽仈鍔ㄧ瓑锛?銆佸湪鐗瑰畾鏃堕棿鐐归獙璇佹寚瀹氳〃鍗曞煙鐨勬纭€с€傚鏋滄寚瀹氱殑琛ㄥ崟鍩熼€氳繃楠岃瘉锛屽垯鍙互杩涜涓嬩竴姝ャ€傝繖閲屼細鐢ㄥ埌validateFields鐨勭涓€涓弬鏁癴ileNames锛屾暟缁勬槸鎸囧畾琛ㄥ崟鍩熺殑缁戝畾鍚嶃€俧orm.validateFields(['xxx'],(err,values)=>{if(err)return//performvalues-relatedoperations...})3.娣诲姞optionsvalidation鍜宱ptionsareoperationalintheapplicablesceneofthenumberstack鍦ㄩ獙璇佸煙鍊肩殑姝ｇ‘鎬ф椂锛屽彲浠ユ牴鎹渶瑕佹坊鍔犻獙璇佽鍒欍€侫PI瀹℃牳濡備笅锛氱ず渚嬪満鏅竴锛氾紙鏍囩寮曟搸椤圭洰锛夊満鏅弿杩帮細绗竴娆¤嚜瀹氫箟楠岃瘉鏃惰〃鍗曟姤閿欏け璐ャ€傜粡鏍稿疄锛岄獙璇佹椂璐﹀彿鏉冮檺涓嶈冻銆傝繖涓椂鍊欙紝鎴戜滑缁欑敤鎴蜂粬搴旇鏈夌殑銆傛潈闄愶紙姝ゆ椂寮圭獥骞舵病鏈夊叧闂級锛屽啀娆＄偣鍑荤‘瀹氾紝鍙戠幇娌℃湁浠讳綍浣滅敤銆傞棶棰樺垎鏋愶細浠庝娇鐢╝ntd鐨勮搴︽潵鐪嬶紝搴旇鏄瓧娈靛€兼湁閿欒鐨勬椂鍊欎笉鑳界户缁悗缁殑鎿嶄綔锛屼絾鏄湁杩欐牱鐨勯檺鍒舵儏鍐碉紝闂鏄嚜瀹氫箟鏍￠獙鐨勭粨鏋滐紝杩欎釜鑷畾涔夐獙璇佹槸鏈夋椂闂撮檺鍒剁殑锛屾墍浠ヨ繖涓椂鍊欐垜浠簲璇ヨ鑷畾涔夐獙璇佸噯纭紝浣跨敤options鍙傛暟锛岃缃甪orce涓簍rue锛屼娇寰楁瘡娆♀€滄彁浜も€濓紙楠岃瘉鍊硷級鎿嶄綔鍓嶅繀椤昏蛋瀹屾墍鏈夌殑楠岃瘉閫昏緫.(鍙傝€僤emo)handleOk=()=>{this.props.form.validateFields({force:true},(err,values)=>{if(err)return//this.props.handleOk(values)});};4銆傚琛ㄥ崟鑱斿悎楠岃瘉鍦烘櫙鎻忚堪锛氫笉鍚岀殑涓氬姟浼氭湁寰堝绫讳技鐨勬儏鍐碘€斺€斾竴涓〉闈㈡湁澶氫釜琛ㄥ崟锛岄偅涔堣繖涓椂鍊欒〃鍗曠殑楠岃瘉搴旇鎬庝箞澶勭悊鍛紵锛堜笅鍥句负鏍囩涓氬姟涓殑涓€涓巻鍙插嚱鏁帮紝浠ｇ爜鏆傜暐锛夐棶棰樺垎鏋愶細鐢变簬椤圭洰鍘嗗彶鍘熷洜锛屽拷鐣ヨ璁￠棶棰橈紝鐩存帴璁ㄨ楠岃瘉鏂规銆傞鍏堬紝瀛樺湪澶氬眰琛ㄥ崟宓屽鐨勯棶棰橈紝鍗冲悓涓€涓〉闈㈠彲鑳藉寘鍚垨宓屽叆澶氫釜琛ㄥ崟琛ㄥ崟銆傜被浼奸棶棰樼殑鏍稿績鍦ㄤ簬濡備綍鍦ㄤ竴涓〉闈腑鑾峰彇褰撳墠瀹瑰櫒鐨勮〃鍗曞疄渚嬪拰宓屽鐨勮〃鍗曘€傝〃鏍肩ず渚嬨€傝В鍐虫柟娉曪細閫氳繃ref鎴栬€呬娇鐢╮c-form鎻愪緵鐨剋rappedComponentRef鍏ュ彛/**鏍稿績浠ｇ爜鎬濊矾濡備笅*/classCustomizedFormextendsReact.Component{...}//浣跨敤wrappedComponentRefconstCustomForm=Form.create()(CustomizedForm);this.form=form}/>姝ゆ椂鐨則his.form鏄疌ustomizedForm瀹炰緥涓婄殑閮ㄥ垎涓氬姟浠ｇ爜锛堝弬鑰冧綔鑰呯殑婕旂ずDemo馃専浠ｇ爜璇︽儏閾炬帴鍦板潃锛歞emo鍦板潃)classRowLevelConfextendsReact.Component{constructor(props){super(props);}鐘舵€侊細IState={...}basicForm锛氫换浣曪紱绾у埆褰㈠紡锛氫换浣曪紱......//楠岃瘉閫昏緫create=()=>{const{form}=this.props;//璋冪敤瑙勫垯缁勪欢鑷韩鐨剉alidatethis.levelForm.validateFields((err,values)=>{if(err)return/*****...涓氬姟澶勭悊閫昏緫...**/form.validateFields(async(err,values)=>{if(err)return/*****...涓氬姟澶勭悊閫昏緫...**/})})}......render(){......return(............)}}閫氳繃鎴戜滑鑷畾涔夌殑onRef鏂规硶锛屽彧闇€瑕佸湪鑷粍浠跺眰浼犻€抮ef{this.props.onRef(ref)}}...otherparams.../>鎬濊€冿細瑙傚療鎴戜滑鐨勯獙璇佺爜锛屾湁娌℃湁浠€涔堜紭鍖栨柟妗堬紵//楠岃瘉閫昏緫create=()=>{const{form}=this.props;//璋冪敤瑙勫垯缁勪欢鑷韩鐨剉alidatethis.levelForm.validateFields((err,values)=>{if(err)return/*****...涓氬姟澶勭悊閫昏緫...**/form.validateFields(async(err,values)=>{if(err)return/*****...涓氬姟澶勭悊閫昏緫...**/})})}铏界劧闂瑙ｅ喅浜嗭紝浣嗙‘瀹炲姝や粠涓婇潰鎺ヤ笅鏉ヨ繘琛屼簡琛ㄥ崟鐨勯獙璇侊紝浣嗘槸浠旂粏鐪嬩唬鐮佸叾瀹炴槸鏈夊厛鍚庨『搴忕殑锛岀浉褰撲簬鍏堥獙璇乴evelForm锛屾垚鍔熷悗鍐嶉獙璇佷笅闈㈢殑琛ㄥ崟锛岄偅鎴戞€庝箞瀹炵幇浠栦滑鍚屾椂锛熼獙璇侊紝瀹屾垚浠ｇ爜涓庨獙璇佷氦浜掔殑浼樺寲锛熶綔鑰呮€濊矾鎻愮ず锛歷alidateFields铏界劧涓嶈繑鍥瀙romise锛屼絾鏄細鍦ㄥ洖璋冩柟娉曚腑璋冪敤杩斿洖鐨勯敊璇拰鍊硷紝鎵€浠ユ垜浠彲浠ョ敤promise灏佽5銆佽〃鏍间笌琛ㄦ牸鐨勭鎾烇紙缁勪欢鑱斿姩鏍￠獙锛変笟鍔″満鏅細鏁版嵁鏍堜腑瀹為檯涓婂瓨鍦ㄧ潃鍚勭涓庤〃鏍艰仈鍔ㄧ殑鎯呭喌銆備綔鑰呬互鏁版嵁璧勪骇锛坉ata-assets-front锛夐」鐩负渚嬶紝鍦―ata琛ㄤ腑鍔ㄦ€佹彃鍏ュ崟涓猧tem锛屽疄鐜板彲鑷畾涔夋牎楠屽唴瀹癸細姝ｅ父鐨勬€濊矾鏄皢dataSource涓殑姣忎竴涓猧tem鐪嬫垚涓€涓猣orm鎴杅ormItem锛岃€屾垜浠皢鍏舵彁鍙栨垚绫讳技鐨勬渶灏忕粨鏋勶紝鍙傝€冨湴鍧€锛氣€滆〃鏍间腑鐨勮〃鏍尖€濓紝鐒跺悗瀵瑰叾杩涜鍒嗘瀽楠岃瘉鏂规硶锛氶€氬父鍙兘鏈変袱绉嶆€濊矾锛?.浣跨敤antdtable鏂板鐨刢omponents灞炴€ц嚜瀹氫箟鍒楄〃鍏冪礌瑕嗙洊榛樿琛ㄦ牸鍏冪礌锛岀劧鍚庡湪鑷畾涔夊垪琛ㄥ厓绱犱腑浣跨敤琛ㄦ牸锛?.灏嗚〃鏍煎厓绱犱腑鐨勬瘡涓€琛屽厓绱犵湅鍋氫竴涓嫭绔嬬殑琛ㄥ崟鍩燂紙formItem锛夛紝鐒跺悗閫氳繃form.validateFields杩涜鏍￠獙鎿嶄綔锛涳紙璇﹁demo婕旂ず锛変袱绉嶆柟寮忕殑瀹炵幇鏂瑰紡鍙兘涓嶅悓锛屼絾褰掓牴缁撳簳锛岄獙璇佹牳蹇冩槸涓€鏍风殑銆傜瑪鑰呰繖閲岄噰鐢ㄧ浜岀鎬濊矾杩涜鍒嗚В锛歝onsttableTitle=[{title:"ipaddress",dataIndex:"ip",key:"ip",width:205,render:(ip,record,index)=>({getFieldDecorator(`mapping[${index}].ip`,{initialValue:ip||"",validateFirst:true,validateTrigger:["onChange","onFocus"],瑙勫垯:[{楠岃瘉鍣細this.syslogIPValidator}]})()})},]......this.props.form.validateFields((err,values)=>{//todosth})5.鎬濊€冧笌鎬荤粨鏈枃鍒椾妇浜哸ntdform3.x鍦ㄦ暟鎹爤鐨勪竴浜涘吀鍨嬪簲鐢紝鏁寸悊杩欓噷鏈変竴浜涘皬tips鍜屼竴涓皬demo锛屽笇鏈涘澶у鏈夋墍甯姪銆傝嚦姝わ紝琛ㄥ崟鐨勯獙璇佹柟娉曞氨澶ц嚧璇村畬浜嗐€傚綋鐒讹紝濡傛灉澶у鏈変粈涔堣ˉ鍏呮垨鑰呴棶棰橈紝娆㈣繋闅忔椂鎻愰棶瀵逛簬antd4.x鐨勮〃鍗曢獙璇侊紝杩欓噷涔熺畝鍗曟€荤粨涓€涓嬨€傛湁鍏磋叮鐨勫悓瀛﹀彲浠ョЩ姝ュ埌antdform4.x鍘绘帰绱細棣栧厛锛屽湪鈥滃０鏄庡紡鈥濋獙璇佷笂鏈変竴涓彉鍖栵細鍚庨潰鏄€渃ustom鈥濋獙璇侊紝鐢ㄤ簬鑷畾涔夐獙璇侊紝璇︽儏4.x鐨勫彉鍖栧緢澶э紝鍏堢湅API锛氭坊鍔犱簡warningOnly锛屾槸涓嶆槸寰堟鐨勯獙璇佸櫒锛烶romise锛屾槸涓嶆槸璺熶笂闈㈢殑鎬濊矾涓€鏍凤紵mockSubmit=()=>{form.validateFields().then((values)=>{//鍦ㄨ繖閲屽仛}).catch((errInfo)=>{銆€銆€//濡傛灉鏈変竴涓湭楠岃瘉鐨勮〃鍗曞煙锛屼細鍘籧atch锛屽彲浠ユ墦鍗版墍鏈夐獙璇佸け璐ョ殑淇℃伅console.log('failure')銆€銆€銆€console.log(errInfo)})}
