Antd form表單的使用、設(shè)值、取值、清空值方式
Antd form表單的使用、設(shè)值、取值、清空值
1、使用
{this.props.form.getFieldDecorator("key",{})(<Input />)}3、設(shè)值
this.props.form.setFieldsValue({
? ? key: '123',
});2、取值
this.props.form.validateFields((err, values) => {
? ? if (!err) {
? ? ? ?console.log("表單信息", values);
? ? }
});3、清空值
this.props.form.resetFields();
antd中的form表單用法筆記
這是我的表單結(jié)構(gòu),引用的antd中的Form表單,里面有四個(gè)From.Item
(這里的Row,Col可以忽略,因?yàn)槲野鼈€(gè)外層結(jié)構(gòu)好布局樣式)

我的需求
1.在此處點(diǎn)擊添加是需要收集到這個(gè)skuId ,以這個(gè)skuId為參數(shù)去調(diào)用接口,去匹配拿到到一組數(shù)據(jù),展示到下面的表格中.
收集某個(gè)From.Item中的數(shù)據(jù)用到的方法getFieldsValue,

拿值怎么拿,需要把From定義成一個(gè)可控組件,也就是給它加一個(gè)ref,通過(guò)標(biāo)簽獲取它上面的值,看代碼
這兩步就可以給標(biāo)簽添加一個(gè)ref,名字為formRef


再通過(guò)ref調(diào)用Form身上的方法,這里這個(gè)setFieldsValue('對(duì)應(yīng)的字段名字'),就可以拿到對(duì)應(yīng)的值

2.同樣的setFieldsValue('字段名')可以設(shè)置它的值,

比如, 你點(diǎn)的編輯按鈕進(jìn)入的頁(yè)面,進(jìn)來(lái)需要重新編輯這些數(shù)據(jù),就可以用到這個(gè)方法

3.最后就是表單提交使用validateFields()的方法

每個(gè)From.Item里面可以通過(guò)rules設(shè)置驗(yàn)證規(guī)則

提交的時(shí)候就會(huì)觸發(fā)

總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue使用watch監(jiān)聽(tīng)一個(gè)對(duì)象中的屬性的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue使用watch監(jiān)聽(tīng)一個(gè)對(duì)象中的屬性的實(shí)現(xiàn)方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
淺析Vue下的components模板使用及應(yīng)用
這篇文章主要介紹了Vue下的components模板的使用及應(yīng)用,本文通過(guò)代碼介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11
關(guān)于element-ui中@selection-change執(zhí)行兩次的問(wèn)題
這篇文章主要介紹了關(guān)于element-ui中@selection-change執(zhí)行兩次的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08
element-plus日歷(Calendar)動(dòng)態(tài)渲染以及避坑指南
這篇文章主要給大家介紹了關(guān)于element-plus日歷(Calendar)動(dòng)態(tài)渲染以及避坑指南的相關(guān)資料,這是最近幫一個(gè)后端朋友處理一個(gè)前端問(wèn)題,elementUI中calendar日歷組件內(nèi)容進(jìn)行自定義顯示,實(shí)現(xiàn)類似通知事項(xiàng)的日歷效果,需要的朋友可以參考下2023-08-08
用vue設(shè)計(jì)一個(gè)數(shù)據(jù)采集器
這篇文章主要介紹了如何用vue設(shè)計(jì)一個(gè)數(shù)據(jù)采集器,幫助大家更好的理解和學(xué)習(xí)使用vue框架,感興趣的朋友可以了解下2021-04-04
vue項(xiàng)目動(dòng)態(tài)設(shè)置頁(yè)面title及是否緩存頁(yè)面的問(wèn)題
這篇文章主要介紹了vue項(xiàng)目動(dòng)態(tài)設(shè)置頁(yè)面title及是否緩存頁(yè)面的問(wèn)題,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
一步步教你利用webpack如何搭一個(gè)vue腳手架(超詳細(xì)講解和注釋)
這篇文章主要給大家介紹了軟玉利用webpack如何搭一個(gè)vue腳手架的相關(guān)資料,文中有超詳細(xì)講解和注釋,對(duì)大家學(xué)習(xí)或者使用webpack具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
自定義input組件如何實(shí)現(xiàn)拖拽文件上傳
這篇文章主要介紹了自定義input組件如何實(shí)現(xiàn)拖拽文件上傳問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03

