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 ....../>
}
  • 12
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 18
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 18
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值