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

wdebmtf2  于 3个月前  发布在  其他
关注(0)|答案(5)|浏览(53)

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会根据已经填入的字段值去请求接口查询值,然后实时的赋值某些字段值

llew8vvj

llew8vvj1#

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

gmxoilav

gmxoilav2#

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

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

ibrsph3r

ibrsph3r3#

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

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

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

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

gijlo24d

gijlo24d4#

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

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

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

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

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

hpxqektj

hpxqektj5#

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

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

这个也是预期的,应该有个 preserve 可以用。
不过你可以 useWatch b,这样 b 是 undefined 就说明 b 隐藏了

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

这个这样设计的,可以 @zombieJ 解释下

相关问题