摘要:一行一個(gè)標(biāo)簽對(duì)應(yīng)多個(gè)輸入組件,這個(gè)需求很常見但在官方例子沒看到合適的,因?yàn)楣俜浇ㄗh注意一個(gè)建議只放一個(gè)被裝飾過(guò)的,當(dāng)有多個(gè)被裝飾過(guò)的時(shí),無(wú)法自動(dòng)生成。
一行一個(gè)標(biāo)簽對(duì)應(yīng)多個(gè)輸入組件,這個(gè)需求很常見但在官方例子沒看到合適的,因?yàn)楣俜浇ㄗh:
注意:一個(gè) Form.Item 建議只放一個(gè)被 getFieldDecorator 裝飾過(guò)的 child,當(dāng)有多個(gè)被裝飾過(guò)的 child 時(shí),help required validateStatus 無(wú)法自動(dòng)生成。
經(jīng)過(guò)摸索,證實(shí)這樣寫是可行的,如下:
|
{this.props.form.getFieldDecorator("shareholderName2", { rules: [{ required: true, message: "請(qǐng)輸入股東名稱" }], })()} {this.props.form.getFieldDecorator("shareholderRate2", { rules: [{ required: true, // tslint:disable-next-line:max-line-length pattern: /(^[1-9][0-9](.d)?$)|(^[1-9](.d)?$)|(^0.d$)/, message: "請(qǐng)輸入正確的持股比例", }], })()}
方法就是用antd的柵格布局來(lái)控制排列,在后面的輸入組件用FormItem再包一層,這樣校驗(yàn)位置也正確,簡(jiǎn)直不要太爽。效果如圖:
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/98885.html
摘要:一行一個(gè)標(biāo)簽對(duì)應(yīng)多個(gè)輸入組件,這個(gè)需求很常見但在官方例子沒看到合適的,因?yàn)楣俜浇ㄗh注意一個(gè)建議只放一個(gè)被裝飾過(guò)的,當(dāng)有多個(gè)被裝飾過(guò)的時(shí),無(wú)法自動(dòng)生成。 一行一個(gè)標(biāo)簽對(duì)應(yīng)多個(gè)輸入組件,這個(gè)需求很常見但在官方例子沒看到合適的,因?yàn)楣俜浇ㄗh: 注意:一個(gè) Form.Item 建議只放一個(gè)被 getFieldDecorator 裝飾過(guò)的 child,當(dāng)有多個(gè)被裝飾過(guò)的 child 時(shí),help...
摘要:是校驗(yàn)表單組件數(shù)據(jù)正確性的字段,其值為數(shù)組,里面的數(shù)組元素可以為。所以數(shù)組元素如果為的話,其內(nèi)容就是的。到目前為止,表單適合大部分的表單應(yīng)用場(chǎng)景。 JSON表單 描述 JSON表單是一個(gè)基于React的抽象組件,它可以把JSON數(shù)據(jù)格式描述的表單轉(zhuǎn)換成項(xiàng)目中的表單,它可以用簡(jiǎn)短的幾行代碼,快速的生成Form表單。JSON表單的優(yōu)點(diǎn)是: 可以快速構(gòu)建出一個(gè)表單 表單的數(shù)據(jù)、邏輯、視圖分...
摘要:嵌套組件配置如果表單組件里還含有其他表單組件,這時(shí)直接通過(guò)組件配置去渲染無(wú)疑能節(jié)約不少的工作量。請(qǐng)輸入方法傳入組件配置的列表就能渲染出表單組件來(lái),需要注意的是,子表單組件的一定是基于父表單組件的。表單的實(shí)例方法請(qǐng)看下節(jié)的生成表單四 container表單組件 在實(shí)際的項(xiàng)目中,JSON表單提供的表單組件是遠(yuǎn)遠(yuǎn)不夠的,而且提供表單組件是一件低效的事,目前Ant Design組件庫(kù)提供的表單...
摘要:場(chǎng)景下有三個(gè),每個(gè)下是一個(gè)表單,點(diǎn)擊不同下的提交按鈕只能驗(yàn)證當(dāng)前提交其值,進(jìn)行相關(guān)操作問題判斷校驗(yàn)結(jié)果就是對(duì)整個(gè)頁(yè)面的進(jìn)行判斷,并不能夠?qū)蝹€(gè)校驗(yàn)結(jié)果做判斷。 場(chǎng)景 : Tabs下有三個(gè)TabPane,每個(gè)TabPane下是一個(gè)form表單,點(diǎn)擊不同form下的提交按鈕只能驗(yàn)證當(dāng)前form.item,提交其value值,進(jìn)行相關(guān)操作 問題 : this.props.form.va...
摘要:引言看過(guò)源碼的都知道,其實(shí)是在一組組件的基礎(chǔ)上進(jìn)行了一層封裝,本文主要解讀組件的基礎(chǔ)組件,另外會(huì)略過(guò)模式下的代碼。解讀源碼首先要從自己最常用的或者感興趣的入手,首先組件最主要的還是在這個(gè)裝飾器入手。 引言 看過(guò)antd源碼的都知道,antd其實(shí)是在一組react-componment組件的基礎(chǔ)上進(jìn)行了一層ui封裝,本文主要解讀antd組件Form的基礎(chǔ)組件react-componmen...
閱讀 1320·2021-09-22 15:09
閱讀 2656·2021-08-20 09:38
閱讀 2402·2021-08-03 14:03
閱讀 863·2019-08-30 15:55
閱讀 3368·2019-08-30 12:59
閱讀 3551·2019-08-26 13:48
閱讀 1886·2019-08-26 11:40
閱讀 647·2019-08-26 10:30