antd多表單提交實例

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

摘要：場景下有三個，每個下是一個表單，點擊不同下的提交按鈕只能驗證當(dāng)前提交其值，進行相關(guān)操作問題判斷校驗結(jié)果就是對整個頁面的進行判斷，并不能夠?qū)蝹€校驗結(jié)果做判斷。

場景： Tabs下有三個TabPane，每個TabPane下是一個form表單，點擊不同form下的提交按鈕只能驗證當(dāng)前form.item,提交其value值，進行相關(guān)操作

問題： this.props.form.validateFieldsAndScroll()判斷校驗結(jié)果就是對整個頁面的Form進行判斷，并不能夠?qū)蝹€Form校驗結(jié)果做判斷。

解決：把表單作為一個組件獨立出去，頁面通過props傳入表單組件需要的值，在表單組件內(nèi)部多帶帶維護相關(guān)邏輯。（相當(dāng)于子向父傳值）

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

（2）子組件：以其中一個為例

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

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

點擊提交：重要代碼

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

到此傳值結(jié)束。

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/105292.html

相關(guān)文章

JSON生成Form表單（三）

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

Half 2019-08-23 13:39 評論0 收藏0
JSON生成Form表單

摘要：是校驗表單組件數(shù)據(jù)正確性的字段，其值為數(shù)組，里面的數(shù)組元素可以為。所以數(shù)組元素如果為的話，其內(nèi)容就是的。到目前為止，表單適合大部分的表單應(yīng)用場景。 JSON表單描述 JSON表單是一個基于React的抽象組件，它可以把JSON數(shù)據(jù)格式描述的表單轉(zhuǎn)換成項目中的表單，它可以用簡短的幾行代碼，快速的生成Form表單。JSON表單的優(yōu)點是：可以快速構(gòu)建出一個表單表單的數(shù)據(jù)、邏輯、視圖分...

bingchen 2019-08-26 13:22 評論0 收藏0
Formik與antd-mobile的移動端的表單實踐（下）

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

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

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

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

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

Fundebug 2019-08-23 10:29 評論0 收藏0