React+Ts+Antd实现Modal弹框中控制多个Tab页的多个Form表单

Posted 2023-04-28

参考技术A

1、其实难点也就是多个Tab页，每个Tab页都有单独的Form表单，通过Modal的一个按钮如何控制，如何去校验多个表单。可以通过Ref实现此操作
首先创建空的Ref数组

渲染界面，循环时每次创建一个Ref，和表单。并且这个表单用当前创建的Ref作为唯一标识。

2、表单子组件，将Form对象传递出去

3、create的时候，也就是点击Modal弹窗确定的时候，调用子组件的方法获取每个ref的Form对象，通过Promise.all方法判断是否都通过了校验

react+ts 项目：引入antd select组件联动 ，ts7053ts2741报错解决

相关组件：

ts7053

解决办法：数据生命时定义类型any，即可解决截图中全部报红。

ts2741

any大法+ 增加option 的 value值定义。