解決Ant Design Modal內嵌Form表單initialValue值不動態更新問題
場景描述:
如下圖所示,點選減免天數會出現一個彈窗, 輸入天數後點擊確定,儲存這個值, 但是我在點第二行的減免天數的時候初始應該是空的, 可是現在顯示的是第一行輸入的值;
<Modal title="減免天數" visible={that.state.visible} onOk={that.handleOk.bind(that)} onCancel={that.handleCancel} > <Form horizontal form={form}> <FormItem {...{labelCol: { span: 5 },wrapperCol: { span: 16 }}} label="減免天數:"> <InputNumber min={0} step={1} {...{style: {width: 120}}} {...getFieldProps('currValue',{ initialValue: that.state.currInputValue,rules: [ {required: true,message:"減免天數不能為空"} ] })} /> </FormItem> </Form> </Modal>
問題分析:
當我們第一次點開Modal的時候, FormItem會得到一個initialValue,但是這個值只在元件掛載的時候執行了一次, 當我們再次開啟Modal視窗的時候並不會更新。
好了發現問題所在了, 接下來就是解決了~
解決方法:
Modal視窗我們都有應用一個Visible來控制是否顯示, 我們只要利用這個值得變化就可以實現Modal元件的重新掛載了。
{ Visible && <Modal ....../> }
補充知識:antd4中Form元件initialValues設定初始值無效,使用setFieldsValue動態賦值,getFieldsValus動態獲取值
首先說明initialValues這個屬性,這個屬性antd官方給的是設定Form元件初始值,但是有個問題如果值從後端請求那麼initialValues可能會設定不上,如果說用匿名元件的話,修改From元件會導致一系列問題,
接下來就是用到了setFieldsValue和getFieldsValus屬性
在antd官網中說明form元件不能使用this.setState修改值,
只能通過setFieldsValue來設定,
通過getFieldsValus來獲取
首先通過getFieldsValus來動態獲取值
export default class List extends Component { //第一步 formRef = React.createRef(); }
第二步
使用ref
<Form {...layout} name="basic" //這裡 formRef在第一步中可以看到 ref={this.formRef} //initialValues 設定初始值 initialValues={this.state.formInitValues} //validateMessages 統一處理錯誤資訊 validateMessages={this.validateMessages} //form submit點選之後成功回撥 onFinish={onFinish} //form submit點選之後失敗回撥 onFinishFailed={onFinishFailed} > </Form>
使用setFieldsValue
注意:sell_linkman是Form中item的欄位名,需要給那個欄位賦值用這個就ok,可以寫在你事件中
this.formRef.current.setFieldsValue({ sell_linkman: value,})
使用getFieldsValue
‘sell_linkman'是form中item欄位名
this.formRef.current.getFieldsValue('sell_linkman')
有什麼不懂的歡迎各路大神指正,不懂可以留言。
以上這篇解決Ant Design Modal內嵌Form表單initialValue值不動態更新問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。