場景描述：

如下圖所示，點擊減免天數(shù)會出現(xià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> 

問題分析：

當我們第一次點開Modal的時候， FormItem會得到一個initialValue,但是這個值只在組件掛載的時候執(zhí)行了一次， 當我們再次打開Modal窗口的時候并不會更新。

好了發(fā)現(xiàn)問題所在了， 接下來就是解決了~

解決方法：

Modal窗口我們都有應(yīng)用一個Visible來控制是否顯示， 我們只要利用這個值得變化就可以實現(xiàn)Modal組件的重新掛載了。

{ Visible && <Modal ....../> }

補充知識：antd4中Form組件initialValues設(shè)置初始值無效，使用setFieldsValue動態(tài)賦值，getFieldsValus動態(tài)獲取值

首先說明initialValues這個屬性，這個屬性antd官方給的是設(shè)置Form組件初始值，但是有個問題如果值從后端請求那么initialValues可能會設(shè)置不上，如果說用匿名組件的話，修改From組件會導(dǎo)致一系列問題，

接下來就是用到了setFieldsValue和getFieldsValus屬性

在antd官網(wǎng)中說明form組件不能使用this.setState修改值，

只能通過setFieldsValue來設(shè)置，

通過getFieldsValus來獲取

首先通過getFieldsValus來動態(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)一處理錯誤信息
  validateMessages={this.validateMessages}
  //form submit點擊之后成功回調(diào)
  onFinish={onFinish}
  //form submit點擊之后失敗回調(diào)
  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內(nèi)嵌Form表單initialValue值不動態(tài)更新問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論