antd多表單提交實(shí)例

miqt 發(fā)布于2019-08-23 18:28 / 1865人閱讀

摘要：場(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.validateFieldsAndScroll()判斷校驗(yàn)結(jié)果就是對(duì)整個(gè)頁(yè)面的Form進(jìn)行判斷，并不能夠?qū)蝹€(gè)Form校驗(yàn)結(jié)果做判斷。

解決：把表單作為一個(gè)組件獨(dú)立出去，頁(yè)面通過props傳入表單組件需要的值，在表單組件內(nèi)部多帶帶維護(hù)相關(guān)邏輯。（相當(dāng)于子向父?jìng)髦担?/p>

代碼：
（1）父組件：state = {MesVal: "",PushVal: "",EmailVal: "",};用于承接各組件value以便操作。
setMessageVal,setPushVal,setEmailVal 三個(gè)方法用來傳遞單個(gè)子頁(yè)面中form的value值。

（2）子組件：以其中一個(gè)為例

注： getFieldDecorator 用于和表單進(jìn)行雙向綁定，可以理解為監(jiān)控各個(gè)item的值的變化；

  (PushForm = Form.create()(PushForm))   創(chuàng)建form實(shí)例，這一步很重要，不可省略！

點(diǎn)擊提交：重要代碼

      const {setPushVal} = this.props
      setPushVal(values)

到此傳值結(jié)束。

插一個(gè)類似省級(jí)聯(lián)動(dòng)的例子：
假設(shè)有這樣倆個(gè)數(shù)組：要求根據(jù)站點(diǎn)的不同，對(duì)應(yīng)選擇該站點(diǎn)下的租戶；
state = {site: [],tntInst: []};

注：使用setFieldValue（設(shè)置一組輸入控件的值）,可以在切換站點(diǎn)select時(shí)，清空上一個(gè)站點(diǎn)的租戶。

云服務(wù)器 GPU云服務(wù)器提交表單表單提交表單數(shù)據(jù)提交提交整個(gè)表單

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/105292.html

相關(guān)文章

JSON生成Form表單（三）

摘要：嵌套組件配置如果表單組件里還含有其他表單組件，這時(shí)直接通過組件配置去渲染無疑能節(jié)約不少的工作量。請(qǐng)輸入方法傳入組件配置的列表就能渲染出表單組件來，需要注意的是，子表單組件的一定是基于父表單組件的。表單的實(shí)例方法請(qǐng)看下節(jié)的生成表單四 container表單組件在實(shí)際的項(xiàng)目中，JSON表單提供的表單組件是遠(yuǎn)遠(yuǎn)不夠的，而且提供表單組件是一件低效的事，目前Ant Design組件庫(kù)提供的表單...

Half 2019-08-23 13:39 評(píng)論0 收藏0
JSON生成Form表單

摘要：是校驗(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ù)、邏輯、視圖分...

bingchen 2019-08-26 13:22 評(píng)論0 收藏0
Formik與antd-mobile的移動(dòng)端的表單實(shí)踐（下）

摘要：會(huì)在用戶每次按下提交時(shí)進(jìn)行一次完整校驗(yàn)或更改時(shí)進(jìn)行一次單表單項(xiàng)的驗(yàn)證。傳入為表單值與外部自定義傳入的返回值為一個(gè)對(duì)象的表單提交處理而表單提交的處理，和我們做表單驗(yàn)證類似，只需要參考官方示例我們就可以簡(jiǎn)單的實(shí)現(xiàn)表單提交功能。大家好，工作閑暇之余又來續(xù)寫一下Formik這個(gè)庫(kù)的文章了，這次文章主要內(nèi)容為如下：更多表單組件的封裝示例單選/多選按鈕選擇器時(shí)間選擇器文本輸入框 ...

sihai 2019-08-23 12:09 評(píng)論0 收藏0
react+antd系列之Form表單(1)：添加與刪除

摘要：在用的時(shí)候，我們?nèi)绻獙?duì)表單進(jìn)行添加和刪除該怎么弄呢，如下表單提交添加刪除名稱名稱不能為空請(qǐng)輸入名稱刪除提交增加這里不僅能對(duì)表單進(jìn)行增加和刪除，還能對(duì)表單進(jìn)行驗(yàn)證，看是否有輸入，以上是本身沒有數(shù)據(jù)的情況，如果是有數(shù)據(jù)的情況如下表單提交添加刪在用antd的時(shí)候，我們?nèi)绻獙?duì)表單進(jìn)行添加和刪除該怎么弄呢，如下： import { connect } from dva; import { ...

Donald 2019-08-23 14:08 評(píng)論0 收藏0
antd 和 element上傳文件詳解與FormData詳解

摘要：當(dāng)用戶完成選擇文件動(dòng)作時(shí)，提交子頁(yè)面中的。從此我們上傳文件就歡欣鼓舞的來找了。因?yàn)榈暮诵氖菍?duì)象，異步的實(shí)現(xiàn)是通過一個(gè)對(duì)象，一般簡(jiǎn)稱該對(duì)象對(duì)。這些回答基于自己理解，如有不妥，希望路過的大神輕噴，指正。背景平時(shí)工作中經(jīng)常會(huì)遇到需要上傳文件的情況，如果你用ant design 或者element ,它們都提供了上傳的組件。我們分別來看一下element 和 antd 手動(dòng)上傳怎么處理：...

Fundebug 2019-08-23 10:29 評(píng)論0 收藏0