解決Ant Design Modal內(nèi)嵌Form表單initialValue值不動(dòng)態(tài)更新問題
場景描述：
如下圖所示，點(diǎn)擊減免天數(shù)會(huì)出現(xiàn)一個(gè)彈窗， 輸入天數(shù)后點(diǎn)擊確定，保存這個(gè)值， 但是我在點(diǎn)第二行的減免天數(shù)的時(shí)候初始應(yīng)該是空的， 可是現(xiàn)在顯示的是第一行輸入的值；
<Modal
title="減免天數(shù)"
visible={that.state.visible}
onOk={that.handleOk.bind(that)}
onCancel={that.handleCancel}
>
<Form horizontal form={form}>
<FormItem {...{labelCol: { span: 5 }, wrapperCol: { span: 16 }}} label="減免天數(shù):">
<InputNumber min={0} step={1} {...{style: {width: 120}}} {...getFieldProps('currValue',{
initialValue: that.state.currInputValue,
rules: [
{required: true,message:"減免天數(shù)不能為空"}
]
})} />
</FormItem>
</Form>
</Modal>
問題分析：
當(dāng)我們第一次點(diǎn)開Modal的時(shí)候， FormItem會(huì)得到一個(gè)initialValue,但是這個(gè)值只在組件掛載的時(shí)候執(zhí)行了一次， 當(dāng)我們?cè)俅未蜷_Modal窗口的時(shí)候并不會(huì)更新。
好了發(fā)現(xiàn)問題所在了， 接下來就是解決了~
解決方法：
Modal窗口我們都有應(yīng)用一個(gè)Visible來控制是否顯示， 我們只要利用這個(gè)值得變化就可以實(shí)現(xiàn)Modal組件的重新掛載了。
{ Visible && <Modal ....../> }
補(bǔ)充知識(shí)：antd4中Form組件initialValues設(shè)置初始值無效，使用setFieldsValue動(dòng)態(tài)賦值，getFieldsValus動(dòng)態(tài)獲取值
首先說明initialValues這個(gè)屬性，這個(gè)屬性antd官方給的是設(shè)置Form組件初始值，但是有個(gè)問題如果值從后端請(qǐng)求那么initialValues可能會(huì)設(shè)置不上，如果說用匿名組件的話，修改From組件會(huì)導(dǎo)致一系列問題，
接下來就是用到了setFieldsValue和getFieldsValus屬性
在antd官網(wǎng)中說明form組件不能使用this.setState修改值，
只能通過setFieldsValue來設(shè)置，
通過getFieldsValus來獲取
首先通過getFieldsValus來動(dòng)態(tài)獲取值
export default class List extends Component {
//第一步
formRef = React.createRef();
}
第二步
使用ref
<Form
{...layout}
name="basic"
//這里 formRef在第一步中可以看到
ref={this.formRef}
//initialValues 設(shè)置初始值
initialValues={this.state.formInitValues}
//validateMessages 統(tǒng)一處理錯(cuò)誤信息
validateMessages={this.validateMessages}
//form submit點(diǎn)擊之后成功回調(diào)
onFinish={onFinish}
//form submit點(diǎn)擊之后失敗回調(diào)
onFinishFailed={onFinishFailed}
>
</Form>
使用setFieldsValue
注意：sell_linkman是Form中item的字段名，需要給那個(gè)字段賦值用這個(gè)就ok，可以寫在你事件中
this.formRef.current.setFieldsValue({
sell_linkman: value,
})
使用getFieldsValue
‘sell_linkman'是form中item字段名
this.formRef.current.getFieldsValue('sell_linkman')
有什么不懂的歡迎各路大神指正，不懂可以留言。
以上這篇解決Ant Design Modal內(nèi)嵌Form表單initialValue值不動(dòng)態(tài)更新問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue中this.$router.push參數(shù)獲取方法
下面小編就為大家分享一篇Vue中this.$router.push參數(shù)獲取方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
在vue項(xiàng)目中(本地)使用iconfont字體圖標(biāo)的三種方式總結(jié)
這篇文章主要介紹了在vue項(xiàng)目中(本地)使用iconfont字體圖標(biāo)的三種方式總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細(xì)介紹了vue3手動(dòng)封裝彈出框組件message的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
本文通過實(shí)例代碼給大家詳細(xì)分享了Vue父組件向子組件傳值的過程以及關(guān)鍵點(diǎn)講解，一起學(xué)習(xí)參考下吧。2018-02-02
詳解vue-cli項(xiàng)目在IE瀏覽器打開報(bào)錯(cuò)解決方法
這篇文章主要介紹了詳解vue-cli項(xiàng)目在IE瀏覽器打開報(bào)錯(cuò)解決方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
vue用vis插件如何實(shí)現(xiàn)網(wǎng)絡(luò)拓?fù)鋱D
這篇文章主要介紹了vue用vis插件如何實(shí)現(xiàn)網(wǎng)絡(luò)拓?fù)鋱D，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue 3.0 全家桶搶先體驗(yàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
vue元素實(shí)現(xiàn)動(dòng)畫過渡效果
這篇文章主要介紹了vue元素實(shí)現(xiàn)動(dòng)畫過渡效果，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
vue3+vite中使用import.meta.glob的操作代碼
在vue2的時(shí)候，我們一般引入多個(gè)js或者其他文件，一般使用? require.context 來引入多個(gè)不同的文件，但是vite中是不支持 require的，他推出了一個(gè)功能用import.meta.glob來引入多個(gè)，單個(gè)的文件，下面通過本文介紹vue3+vite中使用import.meta.glob,需要的朋友可以參考下2022-11-11
Vue2中無法檢測(cè)到數(shù)組變動(dòng)的原因及解決
由于某些限制，vue2不能檢測(cè)到某些情況下數(shù)組的變動(dòng)，本文就將具體講解這兩種限制的解決思路2021-06-06