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

问题描述

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

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

相关代码

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

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

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

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

阅读 363
评论
    2 个回答
    • 2.1k

    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

        撰写回答

        登录后参与交流、获取后续更新提醒