Antd 多层Modal+Form组件嵌套 如何在父级组件中清空子级组件状态与数据?

如题,多层Modal+Form格式弹窗表单嵌套

clipboard.png

子级组件用来添加数据,完成后,传递给父级。

clipboard.png

父级组件提交数据后,子级页面应该重置组件及数据
但实际上,子级数据无法清空

clipboard.png


Antd中关于表单的API

我知道resetFields是用来重置组件的状态与数据,但父组件如何控制子组件的状态及数据呢?

这里是一个简单的 DEMO

阅读 15.7k
3 个回答

通过key值卸载组件

给子组件创建一个state = {subData: {name: '', ip: ''}}
子组件Input onChange的时候,update 这个state.
每次新建的时候,将state修改为初始值state = {subData: {name: '', ip: ''}}

官网还提供了一个办法,每次点开modal的时候给它设置一个新key,这样每次都是一个新的modal..

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题