Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Form.List 中的表单 initialValue 被设置后,Form.List 无法被 reset #44861

Closed
wangpengfeido opened this issue Sep 14, 2023 · 9 comments · Fixed by #45284
Closed

Form.List 中的表单 initialValue 被设置后,Form.List 无法被 reset #44861

wangpengfeido opened this issue Sep 14, 2023 · 9 comments · Fixed by #45284
Labels
improvement improve some features

Comments

@wangpengfeido
Copy link

Reproduction link

https://codepen.io/qbswddgk-the-styleful/pen/vYvZbEb?editors=0010

Steps to reproduce

https://codepen.io/qbswddgk-the-styleful/pen/vYvZbEb?editors=0010 页面中,点击 add field,然后点击 reset 按钮

What is expected?

调用 from.resetFields() 之后,From.List 被清空。

What is actually happening?

调用 from.resetFields() 之后,From.List 未被清空。

Environment Info
antd 5.9.0
React react18
System macos
Browser chrome
@yoyo837
Copy link
Contributor

yoyo837 commented Sep 14, 2023

遵循浏览器默认行为, reset的意思是重制到默认, 默认就是你的initialValue, 如果你需要清空, 可以用setFieldsValue API置空

@yoyo837
Copy link
Contributor

yoyo837 commented Sep 14, 2023

Duplicate of #23341

@yoyo837 yoyo837 marked this as a duplicate of #23341 Sep 14, 2023
@yoyo837 yoyo837 closed this as completed Sep 14, 2023
@yoyo837
Copy link
Contributor

yoyo837 commented Sep 14, 2023

指的是reset List item为默认的话, reopen 先...

@yoyo837 yoyo837 reopened this Sep 14, 2023
@yoyo837 yoyo837 marked this as not a duplicate of #23341 Sep 14, 2023
@crazyair
Copy link
Member

crazyair commented Sep 14, 2023

Form.Item 去掉 initialValue。默认值使用 add('a') https://ant-design.antgroup.com/components/form-cn#operation

@Wxh16144
Copy link
Member

这是不是一个解法?
image

@wangpengfeido
Copy link
Author

wangpengfeido commented Sep 14, 2023

使用 add 默认值或者 Form.List 上的 initialValue 是可以解。

但想象这样的场景,FormList 下面有很多特别复杂的表单项,我把这些表单项封装成了一个组件,我希望这些表单项的初始值逻辑能在封装的这个组件内完成,而不希望在它的外部完成。

不知道是否合理。

@yoyo837
Copy link
Contributor

yoyo837 commented Sep 14, 2023

Form.List

做成一套,A,B组件, 一起封装Form.List + 若干表单项呢?

@wangpengfeido
Copy link
Author

Form.List

做成一套,A,B组件, 一起封装Form.List + 若干表单项呢?

如果是再复杂的场景,Form.List 下面有 n 坨表单,如果把这 n 坨怼到一起,那么这个表单将会变得巨大。或许每个子表单组件再另外导出个hook或者方法在外部设定初始值也是合理的。

回到问题的本身吧。「Form.List 的子表单存在 initialValue 时,Form.List 不会被清空」,如果这个是预期之内的表现的话,那这个 issue 可以关闭了,我会用其他方式实现我想要的能力。非常感谢~

@crazyair
Copy link
Member

使用 add 默认值或者 Form.List 上的 initialValue 是可以解。

但想象这样的场景,FormList 下面有很多特别复杂的表单项,我把这些表单项封装成了一个组件,我希望这些表单项的初始值逻辑能在封装的这个组件内完成,而不希望在它的外部完成。

不知道是否合理。

这个场景我理解,不过默认值还是不要跟 Form.Item 绑定,在 Form.List add 配置 defaultValue 完全能满足。

对于特殊需要加载就设置默认值的,可以在 useEffect 中执行 form.setFields 设置默认值

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
improvement improve some features
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants