问答

ANTD 表单联动与数据回填怎么做?

作者:admin 2021-06-17 我要评论

问题描述 antd表单项之间存在联动,有些字段依赖另一个字段来控制是否渲染,如果只是单纯的录入没问题,可以在render阶段通过form.getFieldValue来做条件渲染,...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

问题描述

antd表单项之间存在联动,有些字段依赖另一个字段来控制是否渲染,如果只是单纯的录入没问题,可以在render阶段通过form.getFieldValue来做条件渲染,但是现在如果要从后台获取数据,这个表单要兼顾录入与更新功能,如何控制呢?

问题出现的环境背景及自己尝试过哪些方法

相关代码

粘贴代码文本(请勿用截图)
https://codesandbox.io/s/comp...

默认情况下是录入模式,在右边浏览器上加上请求参数就会进入回显模式,可以看到Input1和Input2渲染出来了,但是没有值,原因是setFieldsValue发生在渲染前

你期待的结果是什么?实际看到的错误信息又是什么?

我期望能够通过Select选项来控制其他一些字段的渲染,不管是新的录入还是更新时

###

image.png

为什么不用 initialValue 这个属性呢?

用这个属性设置初始值就没有任何问题。

###

已解决,
这个问题的关键是数据回填时,后台接口获取的数据与表单项不一致,
需要通过this.props.form.getFieldsValue()拿到当前表单所有表单项,
再通过this.props.form.setFieldsValue({})将后台数据回填至表单中,
那么就带来一个冲突,数据回填时,有些表单项还未渲染,就是空的,

目前的解决办法:

  • 表单联动时,通过this.props.form.getFieldValue获取条件
  • 数据回填时,通过this.state.data获取条件

然后在render里使用
getFieldValue('select') || this.state.data.select的方式,
使条件渲染可以通过,先渲染出来Form.Item,然后再setFieldsValue

这只是我当前遇到的情况的最小改动解决,Form和State依然是分离开的,还存在一点小问题,比如数据回填后,Select切换时,条件渲染字段值就为空了,不过不影响我的需求,感觉最恰当的解决办法还是需要做双向绑定,比如使用mapPropsToFields onFieldsChange

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 有哪些免费轻量级的适用于日志收集与展

    有哪些免费轻量级的适用于日志收集与展

  • 怎么讲JS 对象的value 赋值到key,形成

    怎么讲JS 对象的value 赋值到key,形成

  • 延迟队列DelayQueue的getDelay()方法,

    延迟队列DelayQueue的getDelay()方法,

  • input file 写了 accept="image/*"

    input file 写了 accept="image/*"

腾讯云代理商
海外云服务器