场景描述:
如下图所示,点击减免天数会出现一个弹窗, 输入天数后点击确定,保存这个值, 但是我在点第二行的减免天数的时候初始应该是空的, 可是现在显示的是第一行输入的值;
<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 ....../>
}