ant-design Form表单动态渲染Form.Item，onValuesChange的第二个参数中没有清空已经隐藏的元素的字段值

wdebmtf2 于 4个月前发布在其他

关注(0)|答案(5)|浏览(60)

Reproduction link

https://codepen.io/geralt-yang/pen/eYwOxex?editors=0010

Steps to reproduce

如Demo所演示的，在b和c先填好值之后，改变a控件的值，动态渲染b和c，发现隐藏b和c之后，onValuesChange的第二个参数不是最新的值，还保留上一次的值

隐藏控件b，控制台打印保留了b的值

What is expected?

在字段动态隐藏之后，onValuesChange的allValues能够清空已经隐藏的元素的字段值

What is actually happening?

未清空已经隐藏的元素的字段值
| Environment | Info |
| ------------ | ------------ |
| antd | 5.18.3 |
| React | react |
| System | macos |
| Browser | Chrome 已是最新版本版本 126.0.6478.127（正式版本） (arm64) |

在实际业务中，可能用户从上往下填写表单，下面某个字段会影响上面表单的动态渲染，填过的值会在onValuesChange的第二个参数中取到，但是已经隐藏的字段不需要其字段值，因为有功能需要在onValuesChange会根据已经填入的字段值去请求接口查询值，然后实时的赋值某些字段值

ant-design

来源：https://github.com/ant-design/ant-design/issues/49744

5条答案

按热度按时间

llew8vvj1#

抛开这个问题不谈，动态表单，可以用 useWatch

赞(0）回复(0）举报 4个月前

gmxoilav2#

抛开这个问题不谈，动态表单，可以用 useWatch

https://codepen.io/geralt-yang/pen/eYwOxex?editors=0010 根据建议修改之后，但是当我控件b在填完值之后，选择控件a隐藏掉b的话，onValuesChange的allValues没有清空b的值，请问有什么方法在动态渲染表单时，能获取实时的表单字段值

赞(0）回复(0）举报 4个月前

ibrsph3r3#

抛开这个问题不谈，动态表单，可以用 useWatch

这个也是预期的，应该有个 preserve 可以用。

不过你可以 useWatch b，这样 b 是 undefined 就说明 b 隐藏了

赞(0）回复(0）举报 4个月前

gijlo24d4#

抛开这个问题不谈，动态表单，可以用 useWatch

这个也是预期的，应该有个 preserve 可以用。

不过你可以 useWatch b，这样 b 是 undefined 就说明 b 隐藏了

preserve 在onValuesChange 的方法里没有效果，onFinish 是获取的到所有存在控件的值，这样的话只能useWatch多个动态变化的字段，实际开发中没有onValuesChange 的allValues方便，如果allValues可以获取实时值的话

赞(0）回复(0）举报 4个月前