antd多表單提交實例

miqt 發布于2019-08-23 18:28 / 1882人閱讀

摘要：場景下有三個，每個下是一個表單，點擊不同下的提交按鈕只能驗證當前提交其值，進行相關操作問題判斷校驗結果就是對整個頁面的進行判斷，并不能夠對單個校驗結果做判斷。

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

問題： this.props.form.validateFieldsAndScroll()判斷校驗結果就是對整個頁面的Form進行判斷，并不能夠對單個Form校驗結果做判斷。

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

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

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

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

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

點擊提交：重要代碼

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

到此傳值結束。

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

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

云服務器 GPU云服務器提交表單表單提交表單數據提交提交整個表單

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/105292.html

JSON生成Form表單（三）

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

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

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

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

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

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

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

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

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

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