ant design同一个页面上弹出的多个modal上的表单，如何实现分别自校验

Question

正在学习使用antdesign的modal和表单，碰到一个问题。
想要达到的效果是父页面上有多个按钮都需要弹出各自的Modal，每个Modal上有Form，有各自的验证内容。
参考了官方例子写了类似下面的代码
父页面中添加NewOneA和NewOneB两个类：
saveAFormRef=(formRef)=>{
this.formRef=formRef;
}
saveBFormRef=(formRef)=>{
this.formRef=formRef;
}
render(){
return(
wrappedComponentRef={this.saveAFormRef}
visible={visibleA}
onCancel={this.handleCancelA}
onOK={this.handleOKA}
/>
wrappedComponentRef={this.saveBFormRef}
visible={visibleB}
onCancel={this.handleCancelB}
onOK={this.handleOKB}
/>
)
}
其中NewOneA和NewOneB都是在Modal中的表单伪代码：
visible={visible}
title={title}
onOk={onOK}
onCancel={onCancel}
>
{getFieldDecorator('author',{
rules:[{...}],
})(
)}
因为在父页面中，把NewOneA和NewOneB的formRef存到同一个this.formRef里了，所以无法正确使用validateFields方法进行校验。
试了一下想把formRef存到两个state里，比如：
this.setState({AformRef:formRef});
可是在其他方法里从this.state.AformRef中取不到值，看来不可行。
请问大家有什么思路可以解决这个问题么？

Answer 1

我们公司写法都是每个Modal一个组件，验证在各自的组件里边做。handleSubmit=()=>{letadopt=false;this.props.form.validateFields((err)=>{adopt=!err;},);if(adopt){...}};