【React】使用antd 的Form组件getFieldDecorator动态设置初始值问题

【React】使用antd 的Form组件getFieldDecorator动态设置初始值问题
如图，点击编辑的时候会弹出一个Modal,在Modal中先在Input中显示各自的名称，然后可以修改

<FormItem
label="名称"
{...formItemLayout}
>
{getFieldDecorator('name', {
initialValue:record.name || '',
rules: [{required: true, message: '名称不能为空'}],
})(
<Input  />
)}
</FormItem>

record代表每一行数据
initialValue的record.name值可以设置成功。但修改（单纯改变值而已，还没有ajax请求）之后关闭Modal，然后打开第二个Modal，第二个Modal里面input的值变为第一次修改之后的值，该如何使第二次打开的值显示正常？

情况一：
第一次打开第一个Modal，不修改input退出。然后打开第二个Modal,第二个Modal里面的input显示正常

第一个Modal
【React】使用antd 的Form组件getFieldDecorator动态设置初始值问题

第二个Modal
【React】使用antd 的Form组件getFieldDecorator动态设置初始值问题

情况二：
第一次打开第一个Modal，修改input退出。然后打开第二个Modal,第二个Modal里面的input显示不正常，里面的值变为一个Modal修改后的值

第一个Modal
【React】使用antd 的Form组件getFieldDecorator动态设置初始值问题

第二个Modal：注意此时的input值已经变成第一个Modal里面修改的值
【React】使用antd 的Form组件getFieldDecorator动态设置初始值问题

先谢过各位了！

回答

可以参考：https://ant.design/components...

Modal 和其他 React 组件一样，有完整的生命周期，重复打开和关闭不会清空你之前填入的数据。你需要手动自行控制数据展现（在打开 Modal 时重设数据），或者像上面一样利用 key 创建一个全新的 Modal 实例。

Form 的 initialValue 和 React 的非受控组件的 defaultValue 是一样的，只有第一次会生效。

可以参考 React 的文档：

不知道你代码怎么组织的，我简单说下我的做法吧
写一个 FormModal 组件，这个组件包含一个按钮和由自身 state 控制显示的 Modal，接受三个必要参数 buttonText：按钮文本内容
renderForm：想要传入的 form 结构
handleSubmit：Modal 中点击确定的处理函数
每次显示 Modal 时，数据都是新的

this.state = { item: {} };
编辑时触发：
onChange = { (e) => this.handleChange(e) };
handleChange(e){ this.setState({ item: e.name }) }

{getFieldDecorator('name', {
initialValue: this.item.name,
rules: [{required: true, message: '名称不能为空'}],
})(
<Input />
)}

有具体的代码吗

Modal 对话框API里面有个destroyOnClose，直接加这个就可以了。

不知道你的问题最终解决没？

我遇到的问题可能跟你差不多
https://segmentfault.com/q/10...

以上是 【React】使用antd 的Form组件getFieldDecorator动态设置初始值问题 的全部内容， 来源链接： utcz.com/a/74424.html

回到顶部