您好,欢迎来到[编程问答]网站首页   源码下载   电子书籍   软件下载   专题
当前位置:首页 >> 编程问答 >> Web开发 >> (react.js)使用antd 的Form组件getFieldDecorator动态设置初始值问题

(react.js)使用antd 的Form组件getFieldDecorator动态设置初始值问题

来源:网络整理     时间:2017/3/28 2:15:16     关键词:

关于网友提出的“ (react.js)使用antd 的Form组件getFieldDecorator动态设置初始值问题”问题疑问,本网通过在网上对“ (react.js)使用antd 的Form组件getFieldDecorator动态设置初始值问题”有关的相关答案进行了整理,供用户进行参考,详细问题解答如下:

问题: (react.js)使用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

第二个Modal

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

第一个Modal

第二个Modal:注意此时的input值已经变成第一个Modal里面修改的值

先谢过各位了!


解决方案1:

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

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


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

可以参考 React 的文档:

  • https://facebook.github.io/re...

  • https://facebook.github.io/re...

解决方案2:

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

解决方案3:

antd 不支持 这种情况。

https://github.com/ant-design...
https://github.com/ant-design...

我们在做的时候也有你这种情况。感觉贼他妈恶心,但是依照antd的说法,只能呵呵了..

我们做的时候是点一次,改变一下model的state,就是给model的state设置一个key为点击时候的时间戳,强制重新渲染组件来实现的


以上介绍了“ (react.js)使用antd 的Form组件getFieldDecorator动态设置初始值问题”的问题解答,希望对有需要的网友有所帮助。
本文网址链接:http://www.codes51.com/itwd/4243349.html

相关图片

相关文章