解決Ant Design Modal內(nèi)嵌Form表單initialValue值不動(dòng)態(tài)更新問題
場(chǎng)景描述：
如下圖所示，點(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)更新問題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue?electron實(shí)現(xiàn)無邊框窗口示例詳解
這篇文章主要為大家介紹了vue?electron實(shí)現(xiàn)無邊框窗口示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
本文主要介紹了如何在vue中使用jsx語法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
眾所周知,當(dāng)容器高度固定而內(nèi)容部分高度超出容器高度時(shí),瀏覽器會(huì)渲染出一個(gè)可以滾動(dòng)并用于顯示剩余界面的條 -- 滾動(dòng)條,它可以簡(jiǎn)單的樣式修改,但是位置是固定的,無法移動(dòng),而我們需要改變位置的時(shí)候,它就不能滿足我們的需求了,這時(shí)我們可以自己手寫一個(gè)2023-10-10
這篇文章主要介紹了Vue中注冊(cè)全局組件的三種方式,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-11-11
vue3為什么要用proxy替代defineProperty
這篇文章主要介紹了vue3為什么要用proxy替代defineProperty,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
淺析Vue2和Vue3中雙向綁定機(jī)制的優(yōu)化與差異
Vue.js?核心特性之一就是雙向綁定,本文將深入探討?Vue2?和?Vue3?在雙向綁定上的區(qū)別,并分析這些改進(jìn)對(duì)性能和開發(fā)體驗(yàn)的影響,希望對(duì)大家有所幫助2024-11-11
本文分步驟給大家介紹vue給不同環(huán)境配置不同打包命令的方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-08-08
Vue-DPlayer是一個(gè)易于使用、高性能的基于Vue.js的視頻播放器組件,這篇文章將為大家詳細(xì)介紹一下vue-dplayer視頻播放器組件的安裝與使用,需要的小伙伴可以參考下2023-09-09
我們現(xiàn)在可以了解一下vue的過渡，vue在插入、更新以及移除DOM元素的時(shí)候，提供了很多不同方式過渡的效果，如果在css過渡自動(dòng)應(yīng)用class，在過渡鉤子函數(shù)中使用JavaScript直接操作DOM就可以了2022-08-08
在我們的印象使用中，vue除了寫業(yè)務(wù)代碼沒有特別新奇的功能了，今天就來看看如何自動(dòng)化生成vue組件文檔2021-06-06